Angular 學習筆記 (Material Datepicker)

https://material.angular.io/components/datepicker/overview

官網介紹很清楚了，這里記入一下我比較不熟悉的.

1. moment js 

Angular 推薦我們使用 moment js 

如果是全場都用的話，可以全局注入 MatMomentDateModule.

如果是想全局用原生的就注入 MatNativeDateModule

想要 override 就在 compoent 層級注入.

providers: [
  { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
  { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
  { provide: MAT_DATE_LOCALE, useValue: 'zh-CN' }, //注意 moment 是 zh-CN 和 ng 不一樣 /.\
]
or 

  providers: [

    { provide: MAT_DATE_FORMATS, useValue: MAT_NATIVE_DATE_FORMATS },

    { provide: DateAdapter, useClass: NativeDateAdapter },

    { provide: MAT_DATE_LOCALE, useValue: 'zh-Hans' }

 ],

 

依賴注入的機制，我感覺不是很方便，如果我想在一個 component 內使用 2 種 datepicker 不是不行嗎 ? 

用 moment 后，我們的類型就是 Moment 而不是 Date 了 

new Date() 變成了 moment()

想要替換 display 的格式, 就 override MAT_DATE_FORMATS

export const MY_MOMENT_DATE_FORMATS: MatDateFormats = {
  parse: {
    dateInput: 'DD MMM YYYY', // moment format
  },
  display: {
    dateInput: 'DD MMM YYYY', // moment format
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

providers: [
  { provide: MAT_DATE_FORMATS, useValue: MY_MOMENT_DATE_FORMATS },
]

想換 locale 就 override MAT_DATE_LOCALE, 注意 moment 使用 zh-CN 而 angular 是 zh-Hans. 不只是中文，還有其它也不一樣，自己查查看哦