Всегда показывать календарь от DatePicker - Angular

Question

Мне нужно, чтобы указатель даты в Angular всегда был виден. Календарь будет всегда виден без зависимости от кнопки (не нужно нажимать на кнопку)

пример

Источник .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

Вы можете использовать mat-calendar для этого:

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

Answer 2

вы можете использовать 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>

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