How to keep mat-datepicker calender open, even after selecting a date from calendar?

Question

I want to keep mat-datepicker open in a particular div. I used opened=true property but it gets closed after selecting a date.

Answer 1

This should work for you:

Add this to your input

(click)="_openCalendar(picker)"
#keepOpen

This to your mat-datepicker

(closed)="_openCalendar(picker)"

And this to your typescript:

@ViewChild('keepOpen') _input: ElementRef;

_openCalendar(picker: MatDatepicker<Date>) {
  picker.open();
}

Don't forget to import ViewChild and ElementRef

That's my working sample on Stackblitz

Answer 2

Use closed event in Datepicker and make it force to open. Working Example: https://stackblitz.com/edit/angular-ysspzm-ge2r2y