【Angular】MatDatepickerで開始日以前を選択できない様にする

Angular MaterialのMatDatepickerはフォームのInput欄をクリックすると、日付範囲ピッカーが表示されて、ユーザーが直感的に日付を選択することができるUIです。

基本的に「Input」や「Form Field」と共に使用します。

■ MatDatepicker 公式ドキュメント
https://material.angular.io/components/datepicker/api

MatDatepickerの雛形を作成する

まずはAngular Materialをインポートします。

ng add @angular/material

app/app.module.tsに必要なコンポーネントを追加します。

import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import {MatDatepickerModule} from '@angular/material/datepicker';
・
・
・
・
imports: [
・
・
MatFormFieldModule,
MatInputModule,
MatDatepickerModule,
],

tsファイルにFormを登録します。

export class DatepickerActionsExample {
   searchForm = new FormGroup({
      startDateTime: new FormControl(''),
      endDateTime: new FormControl('')
   })
}

HTMLファイルに下記の通りMatDatepickerを作成します。

<mat-form-field color="accent" appearance="fill">
  <mat-label>掲載期間（開始日）</mat-label>
  <input matInput [matDatepicker]="startPicker" formControlName="startDate">
  <mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
  <mat-datepicker #startPicker></mat-datepicker>
</mat-form-field>

<mat-form-field color="accent" appearance="fill">
  <mat-label>掲載期間（終了日）</mat-label>
  <input matInput [matDatepicker]="endPicker" formControlName="endDate">
  <mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
  <mat-datepicker #endPicker color="primary"></mat-datepicker>
</mat-form-field>

これでMatDatepickerが完成します。

開始日以前の場合は、選択できないようにする

htmlのdatepickerの[min]の部分にformControlのstartDateの値を指定すると、StartDate以前の日にちが非活性となり、選択できない様になります。

<mat-form-field color="accent" appearance="fill">
  <mat-label>掲載期間（開始日）</mat-label>
  <input matInput [matDatepicker]="startPicker" formControlName="startDate">
  <mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
  <mat-datepicker #startPicker></mat-datepicker>
</mat-form-field>

<mat-form-field color="accent" appearance="fill">
  <mat-label>掲載期間（終了日）</mat-label>
  <input matInput [matDatepicker]="endPicker" [min]='searchForm.value.startDate' formControlName="endDate">
  <mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
  <mat-datepicker #endPicker color="primary"></mat-datepicker>
</mat-form-field>

以上です。