Есть ли способ узнать, что всплывающее окно mat-datepicker было закрыто, потому что была нажата дата

Я хотел бы выполнить некоторые действия, когда всплывающее окно mat-datepicker закрывается, но только если пользователь щелкнул дату (действие не должно запускаться, если всплывающее окно было закрыто клавишей escape или нажатием на фон).

Я знаю, что есть @Output('closed') closedStream: EventEmitter<void>, но он срабатывает каждый раз, когда закрывается всплывающее окно. Моя идея заключалась в том, чтобы определить, есть ли событие dateChange между открытыми и закрытыми событиями, но это не работает, если пользователь нажимает на уже выбранную дату.

Я попытался исправить это с помощью настраиваемого DateAdapter (переопределение метода sameDate или compareDate для возврата выбранной даты всегда отличается от выбранной в данный момент), но кажется, что компонент mat-month-view не использует DateAdapter для сравнения дат перед изменением выбора:

_dateSelected(date: number) {
    if (this._selectedDate != date) {
      const selectedYear = this._dateAdapter.getYear(this.activeDate);
      const selectedMonth = this._dateAdapter.getMonth(this.activeDate);
      const selectedDate = this._dateAdapter.createDate(selectedYear, selectedMonth, date);

      this.selectedChange.emit(selectedDate);
    }

    this._userSelection.emit();
}

Не уверен, что это само по себе ошибка или нет ...

Кто-нибудь знает более простой способ узнать, было ли закрыто всплывающее окно выбора даты материала из-за выбора даты? Я упустил что-то очевидное?

Спасибо!


angular angular-material angular-material2 mat-datepicker
person phil    schedule 14.12.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, что подход, если вы хотите знать, использует ли какое-либо изменение [ngModel] + (ngModelChange) или formControl

  <input matInput [ngModel]="date" (ngModelChange)="change($event)"
        [matDatepicker]="picker" placeholder="Choose a date">
  //in .ts
  date:any;
  change(date:any)
  {
    this.date=date;
    console.log("change")
  }

or

  <input matInput [formControl]="formControl" [matDatepicker]="picker2" 
           placeholder="Choose a date">
   //in .ts
  formControl:FormControl=new FormControl()
  ngOnInit()
  {
    this.formControl.valueChanges.subscribe(res=>{
      console.log("change formControl")
    })
  }

См. простой stackblitz

person Eliseo    schedule 14.12.2019
comment
Спасибо, Элисео. Я знаю, что могу подписаться на изменение базового элемента управления формой, но при этом будут внесены все изменения значений, которые мне не нужны. Мне нужно только определить, когда значение было выбрано из mat-datepicker (в основном из базового mat-календаря). Но проблема в том, что mat-calendar не запускает событие selectedChange, если пользователь щелкнул по уже выбранной дате. - person phil; 14.12.2019
comment
На самом деле mat-month-view не использует DateAdapter для проверки совпадения дат. - person phil; 14.12.2019