CODEWITHSUNDEEP
cssangularsassangular-material2angular5
JavaSSE
JavaSSE

Reputation: 91

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

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

Upvotes: 2

Views: 4669

Answers (2)

Md Rafee
Md Rafee

Reputation: 5530

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

Upvotes: -1

Night Train
Night Train

Reputation: 2576

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

Upvotes: 4

Related Questions