步驟一、 安裝套件

cmd

ng add @angular/material

安裝途中會詢問下列問題

1. 要哪種 css 顏色配置？
   若選擇額外客製化顏色參考下列網址
   Angular Material 配色網址；請看下圖紅線位置
   
2. 是否要設定 angular material 的字型？
3. 是否要設定 angular material 動畫？(選 yes，用於開啟日曆)

假如想要使用 monent 的日期格式再安裝套件

cmd

npm i --save @angular/material-moment-adapter moment

步驟二、 匯入相關 Module

app.moduel.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';

@NgModule({
    imports: [
        BrowserAnimationsModule,
        MatDatepickerModule,
        MatNativeDateModule
    ]
})

步驟三、 使用日期套件

html

<input type="text" name="birthday" placeholder="生日" [matDatepicker]="birthdayPicker" />
<mat-datepicker-toggle [for]="birthdayPicker" matSuffix></mat-datepicker-toggle>
<mat-datepicker #birthdayPicker></mat-datepicker>

結果圖

強力推薦文章

https://ithelp.ithome.com.tw/articles/10194720