How to keep opened mat-datepicker after choosing date?

Question

I am looking for a solution that keeps open the Angular Material Datepicker or mat-datepicker after choosing date.

I had followed this solution, the only problem with solution is every time I choose date it closes and reopens with animation. My every try failed to stop that animation.

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

Below is the code of mat datepicker

<mat-form-field class="example-full-width">
  <input matInput [matDatepicker]="picker" aria-owns="mat-datepicker-0" placeholder="Choose a date">
  <mat-datepicker #picker class="d-block"></mat-datepicker>
</mat-form-field>

I don't know how he stopped the animation. May be older version of Angular Material had no animation. — Supinder Singh
yes, that answer is not working properly for me. It will be great if you can create a stackblitz demo using latest angular and latest angular material. — Supinder Singh

Kinjal Kinjal · Accepted Answer · 2019-08-13T11:45:02

You have to add below code to disable animation as per https://github.com/angular/components/issues/4227#issuecomment-348148642

constructor( private overlayContainer:OverlayContainer, private renderer:Renderer2 ) {

    const disableAnimations:boolean = true;

    // get overlay container to set property that disables animations
    const overlayContainerElement:HTMLElement = this.overlayContainer.getContainerElement();

    // angular animations renderer hooks up the logic to disable animations into setProperty
    this.renderer.setProperty( overlayContainerElement, "@.disabled", disableAnimations);
}

and https://stackblitz.com/edit/angular-xq2upq working code

How to keep opened mat-datepicker after choosing date?

1 Answers