如何修复MatDatepicker复制日期到第二个输入框失效的问题？

问题现象 #

手动输入yyyy-mm-dd格式日期到第一个MatDatepicker输入框可正常识别，但复制相同日期到第二个输入框时，输入框出现红色下划线，无法完成正常解析。

核心原因 #

MatDatepicker默认期望绑定的是Date类型对象，而非字符串。手动输入时组件内置解析器会自动将符合格式的字符串转换为Date对象，但粘贴操作因触发逻辑差异，未触发自动转换流程，导致字符串值与组件期望的类型不匹配，触发校验错误。

解决方案 #

1. 修改日期字段类型

将MT102Criteria中的日期字段从string改为Date，匹配组件的类型期望：

export class MT102Criteria {
  paymentDateFrom: Date;
  paymentDateTo: Date;
}

2. 自定义日期格式解析规则

在组件所属模块中配置MAT_DATE_FORMATS，明确指定解析和显示的日期格式为yyyy-MM-dd，确保组件能正确识别输入的字符串：

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

// 自定义日期格式配置
export const MY_DATE_FORMATS = {
  parse: {
    dateInput: 'yyyy-MM-dd', // 指定解析时的输入格式
  },
  display: {
    dateInput: 'yyyy-MM-dd', // 指定组件显示的日期格式
    monthYearLabel: 'MMM yyyy',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM yyyy',
  },
};

@NgModule({
  declarations: [/* 你的组件声明 */],
  imports: [/* 所需导入模块 */],
  providers: [
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }
  ]
})
export class YourFeatureModule { }

3. 手动处理输入事件（可选）

如果仍存在解析异常，可为输入框添加input事件，强制将输入的字符串转换为有效的Date对象：

<mat-form-field>
  <input matInput [matDatepicker]="paymentDateTo" placeholder="Дата платежа По"
         [(ngModel)]="MT102Criteria.paymentDateTo" name="paymentDateTo"
         (input)="parseDateInput($event, 'paymentDateTo')">
  <mat-datepicker-toggle matSuffix [for]="paymentDateTo"></mat-datepicker-toggle>
  <mat-datepicker #paymentDateTo></mat-datepicker>
</mat-form-field>

组件类中添加处理方法：

parseDateInput(event: Event, field: 'paymentDateFrom' | 'paymentDateTo') {
  const inputEl = event.target as HTMLInputElement;
  const dateStr = inputEl.value.trim();
  if (dateStr) {
    const parsedDate = new Date(dateStr);
    // 验证日期有效性，避免无效值绑定
    if (!isNaN(parsedDate.getTime())) {
      this.MT102Criteria[field] = parsedDate;
    }
  }
}

问题截图 #

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