Angular 学习笔记 (Material Datepicker)

请移步到: Angular Material 18+ 高级教程 – Datepicker の Calendar & Custom DateAdapter (Temporal)

 

更新: 2021-01-07 moment 换掉成 dayjs

moment 已经不会更新了, 大家都在换 

https://github.com/angular/components/issues/20599

angular material team 视乎是没有计划要维护下去了. 所以好事靠自己呗. 

目前比较火的替代方案是 luxon, date-fns, dayjs

由于 dayjs 的接口和 moment 最接近, 所以果断就选了 dayjs 咯. 

做法挺简单的, 就是去 copy paste moment adapter 源码, 然后批量换. 遇到接口不对的地方就改改一下. 

要安装几个 plugin, 不然许多接口会没有哦

import * as dayjs from 'dayjs';
import * as localeData from 'dayjs/plugin/localeData';
import * as objectSupport from 'dayjs/plugin/objectSupport';
import * as utc from 'dayjs/plugin/utc';
import * as localizedFormat from 'dayjs/plugin/localizedFormat';
import * as customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(localeData);
dayjs.extend(objectSupport);
dayjs.extend(utc);
dayjs.extend(localizedFormat);
dayjs.extend(customParseFormat);

 

 

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