Angular Material - embed date picker on page load / html tag

Question

I've a requirement in which the material datepicker (the actual datepicker itself not the icon) has to be displayed in the page.

The page should always displays the datepicker rather than clicking on the icon.

Could someone help / guide me on this.

Answer 1

I was facing the same problem but unfortunately <mat-datepicker opened="true" #picker></mat-datepicker> doesn't work.

I have analyzed the source code as well, seems they don't handle this scenario or not working.

What I have done to make this work is to give focus to the element and go ahead and open from that.

 <input matInput id="matInputEle" [matDatepicker]="picker" (focus)="picker.open()" >

add a function inside your .ts

ngOnInit() { 
   setTimeout(()=>{
        document.getElementById("matInputEle").focus();
   },1);
}

Hope this helps.

We need to wait for this issue got fixed in Angular material until I will go with this.