How to block the close event when selecting a date in angular material datepicker?

0
votes

I'm trying to block the close event which closes the calendar when selecting a date in angular material datepicker.

I've tried like,

// template
<mat-form-field>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker (closed)="onCalendarClose(picker)"></mat-datepicker>
</mat-form-field>

// component
onCalendarClose(picker: MatDatepicker<Date>): void {
  picker.open();
}

But this just literally reopens the calendar after closing it, which blinks the screen and shows back the calendar. So I'm wondering if I can block the close event upon selecting a date.

Update: I'm using Angular 8, Angular Material 8.1.4

2
angularangular-material

2 Answers

1
votes

What material version you are using?Because this ability to output the closed event is in material 5.0.0-rc.1 .If you are not having this material version installed then update it with this version.

0
votes

You have to override the .close() method in component:

picker.close = () => {};

But first save it, and then restore it in ngOnDestroy()!