可以刷新 ng 日期选择器输入值吗？答案

【问题标题】：It is possible to refresh ng date picker input value?可以刷新 ng 日期选择器输入值吗？
【发布时间】：2019-11-09 15:38:40
【问题描述】：

我正在尝试按日期范围进行过滤，所以我有一个这样的日期选择器

  <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，值会更改并且过滤器适用到默认日期（当年），但在视图中，您仍然可以使用日期选择器看到旧的选择日期

有什么方法可以修复视图？

【问题讨论】：

标签： javascript html angular input datepicker

【解决方案1】：

您可以通过重置数组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

【讨论】：

【解决方案2】：

我自己找到了解决方案，

<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" 不同。

【讨论】：