Is there a way to know that mat-datepicker popup was closed because date was clicked

Question

I'd like to perform some actions when mat-datepicker popup closes but only if user clicked on a date (action should not trigger if popup was closed by escape key or backdrop click).

I know there is a @Output('closed') closedStream: EventEmitter<void> but that is triggered every time popup is closed. My idea was to detect if there is a dateChange event between opened and closed events but that does not work if the user clicks on the already selected date.

I tried to fix that with custom DateAdapter (overriding sameDate or compareDate method to return that selected date is always different then currently selected one) but it seems that mat-month-view component is not using DateAdapter for comparing dates before emitting selection change:

_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();
}

Not sure if this in itself is a bug or not...

Does anybody know a simpler way to know if material datepicker popup was closed due to date selection? Am i missing something obvious?

Thanks!

score 0 · Answer 1 · answered Dec 14 '19 at 14:15

0

I think that the aproach if you want to know if some change is using [ngModel] + (ngModelChange) or a 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")
    })
  }

See a simple stackblitz

answered Dec 14 '19 at 14:15

Eliseo

50,109
4
29
67

Thanks Eliseo. I know I can subscribe to change on underlying form control but that will get all value changes which I don't need. I only need to detect when value was selected from mat-datepicker (basically from underlying mat-calendar). But the issue is that mat-calendar does not trigger selectedChange event in case user clicked on an already selected date. – phil Dec 14 '19 at 18:31
Actually mat-month-view is not using DateAdapter to check if dates are the same. – phil Dec 14 '19 at 18:41

Is there a way to know that mat-datepicker popup was closed because date was clicked

1 Answers1