如何禁用Angular Material日期范围选择器的自动填充日期（01/01/2001）

问题：使用Angular Material日期范围选择器时，通过选择器选日期功能正常，但输入部分日期（如仅输入12）后失焦，组件会自动补全为12/01/2001这类错误日期，需要保留用户输入的原始内容。

解决方案一：自定义DateAdapter覆盖解析逻辑 #

Angular Material的日期解析器默认会自动补全不完整的日期，我们可以通过自定义DateAdapter修改这一行为，当输入不完整时返回null，避免自动补全：

1. 创建自定义DateAdapter类：

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

@Injectable()
export class CustomDateAdapter extends MatNativeDateAdapter {
  override parse(value: any): Date | null {
    // 仅当输入字符串长度为10（完整MM/DD/YYYY格式）时才解析，否则返回null
    if (typeof value === 'string' && value.length !== 10) {
      return null;
    }
    return super.parse(value);
  }
}

2. 在模块中配置自定义适配器和日期格式：

import { NgModule } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { CustomDateAdapter } from './custom-date-adapter';

const DATE_FORMATS = {
  parse: {
    dateInput: 'MM/DD/YYYY',
  },
  display: {
    dateInput: 'MM/DD/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@NgModule({
  providers: [
    { provide: DateAdapter, useClass: CustomDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: DATE_FORMATS },
  ],
})
export class YourModuleName {}

解决方案二：自定义指令监听输入框失焦事件 #

通过指令监听输入框的focus和blur事件，保存用户原始输入值，当组件自动补全时恢复：

1. 创建指令：

import { Directive, ElementRef, HostListener, Inject } from '@angular/core';
import { MatDateInput } from '@angular/material/datepicker';
import { MAT_DATE_FORMATS } from '@angular/material/core';

@Directive({
  selector: '[matStartDate],[matEndDate]',
  standalone: true // 使用独立组件/指令时添加此属性
})
export class KeepPartialDateDirective {
  private originalInput: string = '';
  private fullDateFormatLength: number;

  constructor(
    private el: ElementRef,
    private dateInput: MatDateInput<any>,
    @Inject(MAT_DATE_FORMATS) private dateFormats: any
  ) {
    // 获取完整日期格式的长度（MM/DD/YYYY为10）
    this.fullDateFormatLength = this.dateFormats.parse.dateInput.length;
  }

  @HostListener('focus')
  onInputFocus(): void {
    this.originalInput = this.el.nativeElement.value;
  }

  @HostListener('blur')
  onInputBlur(): void {
    const currentValue = this.el.nativeElement.value;
    // 如果当前值是完整格式，但原始输入更短，说明是自动补全的，恢复原始输入
    if (currentValue.length === this.fullDateFormatLength && this.originalInput.length < this.fullDateFormatLength) {
      this.dateInput.value = null;
      this.el.nativeElement.value = this.originalInput;
      // 手动触发表单控件值更新，保持与输入框同步
      this.dateInput._onInput(this.originalInput);
    }
  }
}

2. 在HTML中使用指令：

<input
  matStartDate
  formControlName="start"
  placeholder="MM/DD/YYYY"
  maxlength="10"
  appKeepPartialDate
/>

<input
  matEndDate
  formControlName="end"   
  placeholder="MM/DD/YYYY"
  maxlength="10"
  appKeepPartialDate
/>

注意事项 #

• 方案一从根源修改日期解析逻辑，适用于全局需要此行为的场景；
• 方案二更灵活，可针对特定输入框启用，不影响全局解析规则；
• 两种方案都需要确保表单验证逻辑能正确处理不完整的日期输入（如保留matStartDateInvalid等错误提示）。

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