Блог

Возможно ли прослушивать событие изменения диапазона дат в Material Datepicker?

В настоящее время я использую обходной путь, при котором я слушаю (dateChange) для как начала, так и конца. Затем мне нужно проверить, что ни один из них не является null и, наконец, вызвать мой обработчик событий onRangeChanged(start: Date, end: Date) .

Из полного образца:

     <mat-form-field>
      <mat-label>Enter a date range</mat-label>
      <mat-date-range-input [rangePicker]="picker">
        <input matStartDate placeholder="Start date" (dateChange)="onStartDateChange($event)">
        <input matEndDate placeholder="End date" (dateChange)="onEndDateChange($event)">
      </mat-date-range-input>
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-date-range-picker #picker></mat-date-range-picker>
    </mat-form-field>
  

   onStartDateChange(e: MatDatepickerInputEvent<Date, Date>) {
    if (e amp;amp; e.value) {
      this.start = e.value;
    }
    this.checkRange();
  }

  onEndDateChange(e: MatDatepickerInputEvent<Date, Date>) {
    if (e amp;amp; e.value) {
      this.end = e.value;     
    }
    this.checkRange();
  }

  checkRange(): void {
    if (this.start != null amp;amp; this.end != null) {
      this.onRangeChanged(this.start, this.end);
    }
  }

  // Is it possible to have the DatePicker directly call this event handler?
  onRangeChanged(start: Date, end: Date) {
  }
  

Боковое примечание:

В документах я нашел MatDateSelectionModel<S, D>, который потенциально может дать мне один диапазон дат сразу, но я не понимаю, как его использовать.