前言

最近有个需求需要用到Angular Material组件库中的mat-date-range-picker日期选择框，并且还需要将日期选择弹框里的公历纪年换成民国纪年来展示。找了许久，终于找到一个可行的解决方法，现分享如下。

需求效果

首先，先来看下要完成的效果是怎样的：

material中日期选择框的默认样式如下：
最终的目的是要展示成下面这种民国纪年的形式

操作

先安装这两个依赖

"dependencies": {
    ....,
    "@angular/material-moment-adapter": "14.2.7",
    "moment-taiwan": "^0.0.4",
     ....
  },

npm install @angular/material-moment-adapter
npm install moment-taiwan

创建ts代码重写的日期选择框的展现形式

// taiwan-moment-date-adapter
import { MatMomentDateAdapterOptions, MomentDateAdapter } from '@angular/material-moment-adapter';
import moment, { Moment } from 'moment';
import twMoment from 'moment-taiwan';

export const TaiwanDateFormats = {
  parse: {
    dateInput: 'DD.MM.tYY',
  },
  display: {
    dateInput: 'DD.MM.tYY',
    monthYearLabel: 'MMM tYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM tYY',
  }
};

export class TaiwanDateAdapter extends MomentDateAdapter {

  constructor(locale: string, options: MatMomentDateAdapterOptions) {
    super(locale, options);
    moment.locale(locale);
  }

  override parse(value: any, parseFormat: string): Moment | null {
    return moment(moment(value).format(parseFormat));
  }

  override format(date: Moment, displayFormat: string): string {
    return twMoment(date).format(displayFormat);
  }

  override getYearName(date: Moment): string {
    const twYear = twMoment(date).twYear();
    return (twYear > 0) ? `${twYear}` : '';
  }
}

注意，如果你把上述代码粘贴到自己编辑器后发现import twMoment from 'moment-taiwan'这句代码出现了找不到module的报错，请定义一个moment-taiwan.d.ts的文件，然后在此文件中写入如下代码，即可解决报错问题。

// aim to Eliminate tslint's error message
declare module 'moment-taiwan';

到<mat-date-range-picker>所在的组件ts文件的@Copoment中，加上如下providers的数据：

// 从你第二步代码所在的文件中导入
import { TaiwanDateAdapter, TaiwanDateFormats, } from './taiwan-moment-date-adapter'; 
//
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, } from '@angular/material/core';
import { MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
@Component({
  ...,
  providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'en-US'},
    {
      provide: DateAdapter,
      useClass: TaiwanDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
    },
    {
      provide: MAT_DATE_FORMATS,
      useValue: TaiwanDateFormats,
    },
  ],
})

将日期选择框转换成用中文展示

当你按照上述步骤操作完后，会得到如下结果，

会发现虽然年份是按照民国纪年了，但是月份和周一到周日都是用英文表示的，可使用如下代码来将其都转换成用中文表示

// 用到<mat-date-range-picker>的xx.component.ts文件
import { DateAdapter } from '@angular/material/core';
constructor(
  private adapter: DateAdapter<any> 
 ) {
  this.adapter.setLocale('zh-cn'); //注意，若你想换回英文展示的效果，请将'zh-cn'换成'en-US'
}

至此，将日期转换成民国纪年的效果就实现了。

本文正在参加「金石计划」

Material的mat-date-range-picker如何将日期选择框转换成民国纪年?

前言

需求效果

操作