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. 不僅是中文，還有其它也不同，本身查查看哦