Angular Material日期选择器：翻译年份选择器内的月份标签

问题原因 #

你自定义的MomentDateAdapter中重写的getMonthNames方法，主要用于给日期选择器的月份下拉列表提供选项文本；而年份选择器左上角的MMM格式解析，是由MomentDateAdapter的format方法直接调用moment.js的格式化逻辑。如果未正确配置moment的乌克兰语本地化，或未手动处理MMM格式，就会显示英文月份缩写。

解决方案 #

方法一：使用moment官方乌克兰语本地化（推荐） #

利用moment.js自带的乌克兰语locale，无需手动维护月份缩写：

1. 导入乌克兰语locale包

import 'moment/locale/uk';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { MAT_DATE_LOCALE, Inject } from '@angular/material/core';

2. 修改自定义DateAdapter，设置locale为乌克兰语

export class CustomDateAdapter extends MomentDateAdapter {
  constructor(@Inject(MAT_DATE_LOCALE) dateLocale: string) {
    super(dateLocale);
    this.locale = 'uk'; // 强制设置为乌克兰语locale
  }

  // 保留自定义的星期缩写（如果需要）
  public override getDayOfWeekNames(style: 'long' | 'short' | 'narrow') {
    return ['Нд', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
  }

  public override getFirstDayOfWeek() {
    return 1;
  }
}

3. 在模块的providers中配置本地化参数

providers: [
  { provide: DateAdapter, useClass: CustomDateAdapter },
  { provide: MAT_DATE_FORMATS, useValue: MATERIAL_DATEPICKER_FORMATS },
  { provide: MAT_DATE_LOCALE, useValue: 'uk' }, // 全局设置日期locale
]

这样monthYearLabel: 'MMM YYYY'就会自动渲染为乌克兰语月份缩写+年份。

方法二：手动重写format方法处理MMM格式 #

如果不想依赖moment的官方locale，想用自己定义的月份缩写，可以直接重写format方法拦截MMM格式解析：

export class CustomDateAdapter extends MomentDateAdapter {
  // 自定义乌克兰语月份缩写
  private readonly ukMonthShortNames = [
    'Січ', 'Лют', 'Бер', 'Квіт', 'Трав', 'Черв',
    'Лип', 'Серп', 'Вер', 'Жовт', 'Лист', 'Груд'
  ];

  public override getDayOfWeekNames(style: 'long' | 'short' | 'narrow') {
    return ['Нд', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
  }

  public override getFirstDayOfWeek() {
    return 1;
  }

  public override format(date: moment.Moment, displayFormat: string): string {
    // 处理MMM格式的月份显示
    if (displayFormat === 'MMM YYYY') {
      const monthIndex = date.month(); // moment月份为0-11
      return `${this.ukMonthShortNames[monthIndex]} ${date.year()}`;
    }
    // 其他格式沿用默认逻辑
    return super.format(date, displayFormat);
  }
}

这样无需修改monthYearLabel的值，就能让年份选择器显示自定义的乌克兰语月份。

内容的提问来源于stack exchange，提问作者Vasyl Irzhak