如何阻止matdatepicker将全1格式字符串日期转换为11/11/1111？

方法1：自定义日期解析器 #

重写MatDatePicker的解析逻辑，仅当输入完全匹配指定日期格式时才进行解析，否则返回无效日期，阻止错误解析。

示例代码：

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

@Injectable()
export class CustomDateAdapter extends NativeDateAdapter {
  parse(value: any): Date | null {
    // 仅接受MM/dd/yyyy格式的输入
    const validDatePattern = /^\d{2}\/\d{2}\/\d{4}$/;
    if (typeof value === 'string' && validDatePattern.test(value)) {
      return super.parse(value);
    }
    // 不符合格式返回null，触发表单错误状态
    return null;
  }
}

export const CUSTOM_DATE_FORMATS = {
  parse: {
    dateInput: 'MM/dd/yyyy',
  },
  display: {
    dateInput: 'MM/dd/yyyy',
    monthYearLabel: 'MMM yyyy',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM yyyy',
  },
};

在模块中注入自定义适配器与格式：

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

@NgModule({
  imports: [MatDatepickerModule, MatNativeDateModule],
  providers: [
    { provide: DateAdapter, useClass: CustomDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }
  ]
})
export class AppModule { }

方法2：限制输入长度并添加表单验证 #

通过maxlength属性限制输入框字符数为10（对应MM/dd/yyyy格式的总长度），同时配合表单校验确保格式合规：

<input matInput [matDatepicker]="picker" maxlength="10" [formControl]="dateControl">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error *ngIf="dateControl.invalid">请输入正确的日期格式（MM/dd/yyyy）</mat-error>

组件中定义表单控件：

import { FormControl, Validators } from '@angular/forms';

dateControl = new FormControl('', [
  Validators.required,
  Validators.pattern(/^\d{2}\/\d{2}\/\d{4}$/)
]);

方法3：实时校验输入内容 #

监听输入事件，实时过滤不符合格式的内容，避免超长数字串输入：

<input matInput [matDatepicker]="picker" (input)="filterInvalidInput($event)">

组件中实现过滤逻辑：

filterInvalidInput(event: Event) {
  const inputElement = event.target as HTMLInputElement;
  let value = inputElement.value;
  // 只保留数字和斜杠，且限制格式为MM/dd/yyyy的输入节奏
  value = value.replace(/[^0-9/]/g, '');
  // 自动补全斜杠，同时限制长度
  if (value.length === 2 && !value.includes('/')) {
    value += '/';
  } else if (value.length === 5 && value.charAt(2) === '/' && !value.includes('/', 3)) {
    value += '/';
  }
  inputElement.value = value.slice(0, 10);
}

以上方法均可避免超长数字串被错误解析为无效日期，确保只有符合预期格式的输入才会被MatDatePicker处理。

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