如何禁用Angular matDatepicker自动日期转换 实现短数字输入转日期功能

问题原因 #

MatDatepicker 默认依赖 NativeDateAdapter 内置的日期解析逻辑，会在输入失焦、值变化时优先尝试将输入内容转换为 Date 对象，所以你在 blur 事件中捕获到的值已经是被解析后的错误结果，没有官方参数可以直接禁用该自动解析逻辑，推荐用以下两种方案实现需求：

方案1：自定义 DateAdapter（全局生效，推荐） #

直接重写 DateAdapter 的解析方法，把你需要的数字转日期逻辑内置到解析流程中，是 Angular Material 官方推荐的自定义日期解析方案。

1. 自定义日期适配器

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

@Injectable()
export class CustomDateAdapter extends NativeDateAdapter {
  override parse(value: any): Date | null {
    // 优先处理纯数字输入场景
    if (typeof value === 'string' && /^\d{4,6}$/.test(value)) {
      let year: number, month: number, day: number;
      if (value.length === 4) {
        // 4位数字按 MMDD 处理，年规则可自行调整，示例取2021，也可替换为当前年 new Date().getFullYear()
        year = 2021;
        month = parseInt(value.slice(0, 2), 10) - 1;
        day = parseInt(value.slice(2, 4), 10);
      } else {
        // 6位数字按 YYMMDD 处理，前缀补20
        year = 2000 + parseInt(value.slice(0, 2), 10);
        month = parseInt(value.slice(2, 4), 10) - 1;
        day = parseInt(value.slice(4, 6), 10);
      }
      // 校验日期合法性
      const date = new Date(year, month, day);
      if (date.getFullYear() === year && date.getMonth() === month && date.getDate() === day) {
        return date;
      }
    }
    // 非匹配场景走原有解析逻辑
    return super.parse(value);
  }
}

2. 自定义日期格式，统一显示为yyyy-MM-dd

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

export const CUSTOM_DATE_FORMATS = {
  parse: {
    dateInput: ['yyyy-MM-dd', 'MMDD', 'YYMMDD'],
  },
  display: {
    dateInput: 'yyyy-MM-dd',
    monthYearLabel: 'yyyy年MM月',
    dateA11yLabel: 'yyyy-MM-dd',
    monthYearA11yLabel: 'yyyy年MM月',
  },
};

3. 在对应模块的 providers 中注册配置

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

方案2：高优先级指令（局部生效，无需修改全局配置） #

如果只需要在部分输入框使用该转换逻辑，可以给指令的 blur 监听设置更高优先级，在 MatDatepicker 解析前先完成格式转换：

import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: '[simpleDateFormatterDirective]',
  standalone: true // 非 standalone 组件移除该行即可
})
export class SimpleDateFormatterDirective {
  // 存储原始输入的数字内容，避免被MatDatepicker提前修改
  private rawNumberValue = '';

  constructor(private inputEl: ElementRef<HTMLInputElement>) {}

  // 实时同步原始输入的纯数字内容
  @HostListener('input', ['$event.target.value'])
  onInput(value: string) {
    this.rawNumberValue = value.replace(/\D/g, '');
  }

  // 设置优先级100，保证先于MatDatepicker的blur逻辑执行
  @HostListener('blur', [], { priority: 100 })
  onBlur() {
    const val = this.rawNumberValue;
    let formattedDate = '';

    if (val.length === 4) {
      // 4位数字转换逻辑，年规则可自行调整
      formattedDate = `2021-${val.slice(0,2)}-${val.slice(2,4)}`;
    } else if (val.length === 6) {
      // 6位数字转换逻辑
      formattedDate = `20${val.slice(0,2)}-${val.slice(2,4)}-${val.slice(4,6)}`;
    }

    if (formattedDate) {
      this.inputEl.nativeElement.value = formattedDate;
      // 手动触发input事件，通知MatDatepicker读取转换后的值
      this.inputEl.nativeElement.dispatchEvent(new Event('input'));
    }
    this.rawNumberValue = '';
  }
}

你的原有模板代码无需修改，直接给输入框加上simpleDateFormatterDirective属性即可生效。

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