Angular 5 Datepicker - Material

0
votes

I am trying to keep the Angular Material Datepicker open by default on rendering of the page inside a section so it's not like an input field and doesn't require the user to click on an input to see the calendar.

This is the one I'm using and it requires clicking on the input field at the moment. https://material.angular.io/components/datepicker/overview

Any suggestions on this?

Thanks

2
angularangular-materialangular5

2 Answers

0
votes

MatDatepicker has an open() method and a toggle property.
Either call open() on ngOnInit() or set toggle: enable .
Though I'm not sure that toggle will work as expected.

0
votes

MatDatePicker has some properties defined, You can use @Input(opened) for this. Sample code for your reference 

`<mat-form-field class="example-full-width">
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker #picker opened=true></mat-datepicker>
</mat-form-field>`