Angularでmat-datepickerを使用する方法

まず、AngularプロジェクトにAngular Materialをインストールする必要があります。以下のコマンドを使用して、必要なパッケージを追加します。

ng add @angular/material

次に、mat-datepickerを利用するコンポーネントで、必要なモジュールをインポートします。

import { MatDatepickerModule } from '@angular/material/datepicker';
@NgModule({
  ...
  imports: [
    ...
    MatDatepickerModule,
    ...
  ],
  ...
})
export class AppModule { }

これにより、mat-datepickerを使用する準備が整いました。

次に、mat-datepickerを実際に利用するコンポーネントを作成しましょう。以下は、mat-datepickerを使用して日付を選択するための基本的な例です。

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="日付を選択">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

上記のコードでは、mat-form-fieldの内部にinput要素とmat-datepicker-toggle、mat-datepickerを配置しています。matInputディレクティブを使用して、入力フィールドをmat-datepickerに関連付けます。

これで、mat-datepickerが正しく表示され、ユーザーが日付を選択できるようになります。

さらに、mat-datepickerにはさまざまなオプションがあります。たとえば、日付の範囲指定や初期値の設定などが可能です。公式ドキュメントや他のチュートリアルを参照して、さまざまなオプションを試してみてください。

以上が、Angularでmat-datepickerを使用する方法と簡単なコード例です。mat-datepickerは、日付の選択や表示を容易にするための強力なツールです。是非、お試しください。