【Angular】日付選択カレンダー

結論

• input...日付を入力する場所。日付ピッカーと連携する
• mat-datepicker-toggle...クリックすると、指定したカレンダーを開くボタン
• mat-datepicker...日付を選択するカレンダー本体

詳細

<mat-form-field appearance="outline">
  <mat-label>日付</mat-label>

  <input matInput [matDatepicker]="picker">

  <mat-datepicker-toggle
    matSuffix
    [for]="picker">
  </mat-datepicker-toggle>
<!--このテンプレート内で、このカレンダーを picker という名前で参照できるようにする-->
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

• 画面に input とカレンダーアイコンが表示される
• ユーザーがカレンダーアイコンをクリックする
• mat-datepicker-toggle が、picker として指定された mat-datepicker を開く
• ユーザーがカレンダー上の日付を選択する
• 選択した日付が input の入力値に反映される