Angular Material Datepicker 手动输入日期格式修改方法咨询

解决方案 #

你之前仅配置locale不生效的核心原因是：默认的Angular Material Datepicker解析逻辑遇到日、月都小于等于12的歧义日期时，会优先将第一个数值识别为月份，仅配置locale不会修改底层的解析规则，需要自定义日期格式和适配器。

方案一：使用Moment日期适配器（推荐，配置最简便）

1. 安装依赖

npm install @angular/material-moment-adapter moment

2. 在AppModule中添加配置
   首先导入所需依赖：

import { MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
import { DateAdapter } from '@angular/material/core';

自定义DD.MM.YYYY格式规则：

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

在NgModule的providers数组中添加以下配置：

providers: [
  {
    provide: DateAdapter,
    useClass: MomentDateAdapter,
    deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
  },
  { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
  // 可根据需求替换对应地区locale
  { provide: MAT_DATE_LOCALE, useValue: 'de-DE' },
]

方案二：自定义原生日期适配器（无需引入moment依赖）

如果你不想引入额外的moment依赖，可以重写原生日期适配器的解析方法：

import { NativeDateAdapter } from '@angular/material/core';
import { Injectable } from '@angular/core';

@Injectable()
export class CustomDateAdapter extends NativeDateAdapter {
  override parse(value: any): Date | null {
    if (typeof value === 'string' && value.includes('.')) {
      const [day, month, year] = value.split('.').map(Number);
      return new Date(year, month - 1, day);
    }
    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }
}

之后将AppModule providers中的DateAdapter替换为自定义类即可，MAT_DATE_FORMATS 配置和方案一一致：

providers: [
  { provide: DateAdapter, useClass: CustomDateAdapter, deps: [MAT_DATE_LOCALE] },
  { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
  { provide: MAT_DATE_LOCALE, useValue: 'de-DE' },
]

两种方案配置完成后，手动输入日期都会严格按照DD.MM.YYYY规则解析，不会再出现歧义日期自动切换格式的问题。

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