Angular Material日期选择器自定义日期格式失效原因及修复方案

问题原因 #

Angular Material的日期选择器日期显示/解析逻辑由**日期适配器（DateAdapter）**和MAT_DATE_FORMATS配置共同控制。仅配置MAT_DATE_FORMATS但未对应适配日期适配器时，适配器会默认采用浏览器本地化设置（如美式MM/DD/YYYY格式），导致自定义格式无法生效。

修复方案 #

方案1：通过本地化地区配置快速实现 #

如果只需使用标准地区格式（如英式DD/MM/YYYY），直接在模块或组件的providers中添加地区配置：

// 导入必要依赖
import { MAT_DATE_LOCALE, MAT_DATE_FORMATS } from '@angular/material/core';

// 你的自定义格式配置
export const MY_DATE_FORMATS = {
  parse: {
    dateInput: 'DD/MM/YYYY',
  },
  display: {
    dateInput: 'DD/MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'DD/MM/YYYY',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

// 在providers中添加配置
providers: [
  { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }, // 指定英式地区格式
  { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
]

方案2：自定义日期适配器实现完全自定义格式 #

如果需要非标准的自定义格式，需创建自定义适配器并配置：

1. 导入依赖并创建适配器：

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

export class CustomDateAdapter extends NativeDateAdapter {
  override format(date: Date, displayFormat: any): string {
    // 针对自定义格式做处理
    if (displayFormat === 'DD/MM/YYYY') {
      const day = date.getDate().toString().padStart(2, '0');
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const year = date.getFullYear();
      return `${day}/${month}/${year}`;
    }
    // 其他格式沿用默认逻辑
    return super.format(date, displayFormat);
  }
}

2. 在模块或组件的providers中注册适配器和格式：

providers: [
  { provide: DateAdapter, useClass: CustomDateAdapter },
  { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
]

验证说明 #

配置完成后，日期选择器的输入框、弹窗显示的日期都会遵循DD/MM/YYYY格式，同时也能正确解析用户按该格式输入的日期。

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