Можно обновить входное значение выбора даты? - PullRequest
Новая
       14

Можно обновить входное значение выбора даты?

2 голосов
/ 27 июня 2019

Я пытаюсь сделать фильтр по диапазону дат, поэтому у меня есть средство выбора даты, подобное этому 

  <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, значение изменяется, и фильтр применяется на даты по умолчанию (текущий год), но в представлении вы все еще видите старую выбранную дату с помощью средства выбора даты

любой способ исправить вид?

Ответы [ 2 ]

1 голос
/ 27 июня 2019

Вы можете обновить метод сброса путем сброса массива 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

0 голосов
/ 27 июня 2019

Я сам нашел решение, 

<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".

...