Angular Material Datepickerの基本（10分でカレンダー作成）

Datepickerの使用法

変更するファイルは、
cmaterial.module.tsと、
app.component.html です。

cmaterial.module.tsファイルから説明します。
@NgModuleの、 inportsは今回記入していませんが、
コードとしてはexportsだけでも十分です。

モジュールは、
MatFormFieldModule、
MatInputModule、
MatDatepickerModule、
MatNativeDateModule、
を追加しています。

  
import { NgModule } from "@angular/core";
//追加コード
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';

//変更コード
@NgModule({
 exports:[ MatFormFieldModule,
               MatInputModule,
               MatDatepickerModule,
        　    MatNativeDateModule
          ]
})
export class CmaterialModule{}  
  

次はapp.component.htmlファイルです。

matInputでは、
1/6/2021 などのデータを入力します。
mat-datepicker-toggleはトグルボタンで、
右側に表示しているアイコンのトグルをクリックすると、
カレンダーを表示します。
mat-datepickerはカレンダーの表示です。
詳細は、Angular Material Datepickerの、
基本的な使用方法を参照してください。

  
<mat-form-field  appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput  [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>  
  

今回は以上です。