【Angular】MatDatepickerで開始日以前を選択できない様にする
15580 ワード
Angular MaterialのMatDatepickerはフォームのInput欄をクリックすると、日付範囲ピッカーが表示されて、ユーザーが直感的に日付を選択することができるUIです。
基本的に「Input」や「Form Field」と共に使用します。
■ MatDatepicker 公式ドキュメント
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>
以上です。
Author And Source
この問題について(【Angular】MatDatepickerで開始日以前を選択できない様にする), 我々は、より多くの情報をここで見つけました https://zenn.dev/bje35149/articles/3bfbe5700e0a33著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol