Mat-Datepicker：如何使用ja-JP日期格式但保留英文界面

直接设置MAT_DATE_LOCALE为ja-JP会同时影响日期格式和界面文本语言，因为这个令牌同时控制日期本地化的格式规则和UI显示文本。要实现格式与界面语言分离，需要自定义日期适配器和格式配置：

步骤1：导入必要依赖 #

在app.module.ts中导入相关模块和类：

import { NgModule, Inject } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { NativeDateAdapter } from '@angular/material/core';

步骤2：定义自定义日期格式 #

创建符合需求的日期格式配置：

// 自定义日期格式规则
export const CUSTOM_DATE_FORMATS = {
  parse: {
    dateInput: 'YYYY/MM/DD', // 解析输入的格式
  },
  display: {
    dateInput: 'YYYY/MM/DD', // 界面显示的格式
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

步骤3：自定义日期适配器（确保英文界面） #

继承原生日期适配器，重写月份和星期的名称返回英文：

export class CustomDateAdapter extends NativeDateAdapter {
  constructor(@Inject(MAT_DATE_LOCALE) dateLocale: string) {
    super(dateLocale);
  }

  // 重写月份名称，返回英文
  getMonthNames(style: 'long' | 'short' | 'narrow'): string[] {
    return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  }

  // 重写星期名称，返回英文
  getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): string[] {
    return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  }
}

步骤4：在模块中配置提供者 #

将自定义适配器和格式配置注入到模块的providers中，同时明确设置区域为英文：

@NgModule({
  // ... 其他模块声明和导入
  providers: [
    {
      provide: DateAdapter,
      useClass: CustomDateAdapter,
      deps: [MAT_DATE_LOCALE]
    },
    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
    { provide: MAT_DATE_LOCALE, useValue: 'en-US' } // 锁定英文界面
  ],
})
export class AppModule { }

可选：使用Moment.js适配器（若项目依赖Moment） #

如果你的项目使用MomentDateAdapter，只需替换适配器类即可：

import { MomentDateAdapter } from '@angular/material-moment-adapter';

export class CustomMomentDateAdapter extends MomentDateAdapter {
  constructor(@Inject(MAT_DATE_LOCALE) dateLocale: string) {
    super(dateLocale);
  }

  getMonthNames(style: 'long' | 'short' | 'narrow'): string[] {
    return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  }

  getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): string[] {
    return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  }
}

然后在providers中把DateAdapter的useClass改为CustomMomentDateAdapter即可。

这样配置后，日期选择器会以YYYY/MM/DD格式显示和解析日期，同时界面文本（月份、星期等）保持英文。

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