Значение выбора даты не обновляется в представлении до открытия календаря

Question

У меня есть два сборщика даты startDate и endDate. Я пытаюсь реализовать базовую проверку даты c, когда дата начала не может быть после даты окончания.

Мне нужно убедиться, что , если пользователь выбирает дату окончания, которая предшествует дате начала, - тогда дата начала должна измениться на выбранную дату окончания.

Я использую (dateChange) источник событий, и он изменяет значение startDate в модели, однако значение поля в фактическом представлении не обновляется, пока я не взаимодействую с элементом выбора даты startDate.

HTML

<mat-form-field>
    <mat-label>Start date</mat-label>
    <input matInput [matDatepicker]="fromDate" [value]="startDate"
        (dateChange)="changeStartDate($event)" [matDatepickerFilter]="startDateFilter">
    <mat-datepicker-toggle matSuffix [for]="fromDate">
        <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
    </mat-datepicker-toggle>
    <mat-datepicker #fromDate></mat-datepicker>
</mat-form-field>
<mat-form-field>
    <mat-label>End date</mat-label>
    <input matInput [matDatepicker]="toDate" [value]="endDate"
        (dateChange)="changeEndDate($event)" [matDatepickerFilter]="endDateFilter">
    <mat-datepicker-toggle matSuffix [for]="toDate">
        <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
    </mat-datepicker-toggle>
    <mat-datepicker #toDate></mat-datepicker>
</mat-form-field>

КОМПОНЕНТ

startDateFilter = (selectedDate: Date | null): boolean => {
  return selectedDate < new Date()  && selectedDate < this.endDate;
}

endDateFilter = (selectedDate: Date | null): boolean => {
  return selectedDate < new Date();
}

changeStartDate(event) {
  this.startDate = event.value;
}

changeEndDate(event) {
  if (event.value < this.startDate) {
    this.startDate.setTime(event.value.getTime());
  }
  this.endDate = event.value;
}

EDIT - объявления переменных

endDate = new Date();
startDate = new Date(this.endDate.getFullYear(), this.endDate.getMonth(), this.endDate.getDate()-7);

Answer 1

Исправление к startDate не сразу фиксируется привязкой данных, поскольку связанное значение, являющееся ссылкой на объект Date, не изменяется. Вы можете убедиться, что изменение обнаружено, создав новый объект Date:

changeEndDate(event) {
  if (event.value < this.startDate) {
    this.startDate = new Date(event.value);  // <-- create new Date object
  }
  this.endDate = event.value;
}

См. этот стек для демонстрации.