Always showing the calendar from datepicker - Angular

问题

I need to have the datepicker in Angular always visible. The calendar will be always visible without the dependency on the button (don't need to click on the button)

example

Source .html

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

回答1:

You can use mat-calendar for this:

<mat-calendar [selected]="selectedDate" (selectedChange)="selectedDate = $event"></mat-calendar>

回答2:

You can add opened="true" to the datepicker.

You can use code like this :

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker class="fixed-open" #picker opened="true"></mat-datepicker>
</mat-form-field>

Working example : https://stackblitz.com/edit/angular-ysspzm?file=app%2Fdatepicker-overview-example.html

Documentation : https://material.angular.io/components/datepicker/api

回答3:

you can using opened="true" for this.

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker opened="true"></mat-datepicker>
</mat-form-field>

来源：https://stackoverflow.com/questions/51170663/always-showing-the-calendar-from-datepicker-angular