始终显示日期选择器中的日历 - Angular

Question

我需要让 Angular 中的日期选择器始终可见。日历将始终可见，而不依赖于按钮（不需要单击按钮）

example

来源 .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>

Answer 1

您可以将 opened="true" 添加到日期选择器。

您可以使用这样的代码：

<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>

工作示例：https://stackblitz.com/edit/angular-ysspzm?file=app%2Fdatepicker-overview-example.html

文档：https://material.angular.io/components/datepicker/api

Answer 2

您可以为此使用 mat-calendar：

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

Answer 3

您可以为此使用 opened="true"。

<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>

始终显示日期选择器中的日历 - Angular

Always showing the calendar from datepicker - Angular

calendar

datepicker

angular-material2

angular