Angular Material日期选择器输入框日期自动格式化实现咨询

当然可以实现！通过扩展MomentDateAdapter是最优雅的全局解决方案，正好匹配你想要的自动格式化需求。下面是具体的实现步骤和代码示例：

1. 自定义MomentDateAdapter #

创建一个自定义适配器类，重写parse方法来处理无分隔符的DDMMYYYY输入：

import { Injectable } from '@angular/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { Moment } from 'moment';
import * as moment from 'moment';

@Injectable()
export class CustomMomentDateAdapter extends MomentDateAdapter {
  parse(value: any, parseFormat: string | string[]): Moment | null {
    // 识别用户输入的8位纯数字日期（DDMMYYYY格式）
    if (typeof value === 'string' && value.length === 8 && /^\d{8}$/.test(value)) {
      // 插入斜杠分隔符，转换为fr-FR区域的标准格式DD/MM/YYYY
      const formattedValue = `${value.slice(0,2)}/${value.slice(2,4)}/${value.slice(4)}`;
      // 调用父类的parse方法，用fr-FR区域规则解析转换后的字符串
      return super.parse(formattedValue, this.localeData.longDateFormat('L'));
    }
    // 其他情况（比如带分隔符的输入、日历选择的日期）交给父类默认逻辑处理
    return super.parse(value, parseFormat);
  }
}

2. 配置全局日期格式 #

定义符合fr-FR区域的日期格式配置，确保输入框的显示和解析规则统一：

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

export const CUSTOM_DATE_FORMATS = {
  parse: {
    dateInput: 'DD/MM/YYYY', // 输入框的解析格式（包含转换后的带分隔符格式）
  },
  display: {
    dateInput: 'DD/MM/YYYY', // 输入框的显示格式
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

3. 在模块中注册全局配置 #

在你的根模块（如AppModule）或共享模块中，替换默认的DateAdapter并注入自定义格式：

import { NgModule } from '@angular/core';
import { MAT_DATE_LOCALE, DateAdapter } from '@angular/material/core';
import { MomentDateModule } from '@angular/material-moment-adapter';
import { CustomMomentDateAdapter } from './custom-moment-date-adapter';
import { CUSTOM_DATE_FORMATS } from './custom-date-formats';

@NgModule({
  imports: [MomentDateModule],
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'fr-FR' }, // 设置全局区域为fr-FR
    { provide: DateAdapter, useClass: CustomMomentDateAdapter }, // 使用自定义适配器
    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }, // 应用自定义格式
  ],
})
export class AppModule {}

4. 验证效果 #

现在所有的mat-datepicker输入框都会自动实现你想要的逻辑：

• 用户输入03052018，会被自动转换为03/05/2018并验证有效性
• 如果输入的8位数字是无效日期（比如32052018），适配器会返回null，日期选择器会标记为无效，符合fr-FR的日期规则
• 通过日历选择的日期依然保持DD/MM/YYYY的标准显示格式

额外提示 #

• 如果需要支持多种输入格式（比如同时兼容DDMMYYYY和DD/MM/YYYY），可以在parse方法中扩展判断逻辑，或者在parseFormat数组中添加多个格式
• 确保已安装必要依赖：

npm install moment @angular/material-moment-adapter

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