我正在尝试按日期范围进行过滤,所以我有一个这样的日期选择器
<form class="example-form">
<mat-form-field style="width:100%">
<input matInput placeholder="Rango de fechas a buscar" [(ngModel)]="dateRange" name="Rango de fechas a buscar" [owlDateTimeTrigger]="dt" [owlDateTime]="dt"
[selectMode]="'range'">
<owl-date-time [pickerType]="'calendar'" name="Rango de fechas" #dt></owl-date-time>
</mat-form-field>
</form>
现在在组件上,我有以下代码
resetDate() {
let year = new Date().getFullYear();
let initialYear = "01/01/"+year;
let finalYear = "12/31/"+year;
this.dateRange[0] = new Date(initialYear);
this.dateRange[1] = new Date(finalYear);
}
我第一次加载页面时它可以工作并且默认过滤器是当前年份,问题是如果我使用 datePicker 选择任何日期,然后在 clearFilters 上我再次调用 resetDate,值会发生变化,过滤器应用于默认日期(当前年份),但在视图中,您仍然会看到带有日期选择器的旧选择日期
有什么方法可以修复视图吗?
您可以通过重置数组来更新重置方法dateTimeRange
resetDate() {
let year = new Date().getFullYear();
let initialYear = "01/01/" + year;
let finalYear = "12/31/" + year;
this.dateTimeRange = [];
this.dateTimeRange.push(new Date(initialYear));
this.dateTimeRange.push(new Date(finalYear));
}
演示 https://stackblitz.com/edit/owl-datetimepicker-lmmxrk?file=src%2Fapp%2Frange%2Frange.component.ts
我自己找到了解决方案,
<mat-form-field>
<input matInput [(ngModel)]="fromDate" [matDatepicker]="from" (change)="onChangeEvent($event)" placeholder="From">
<mat-datepicker-toggle matSuffix [for]="from"></mat-datepicker-toggle>
<mat-datepicker #from></mat-datepicker>
</mat-form-field>
我不得不更新[(ngModel)]
以[(ngModel)]="fromDate"
与[matDatepicker]="from"
不同。