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. 不只是中文，还有其它也不一样，自己查查看哦