matDatepicker输入两位数字时valueChanges触发今日日期问题及优化需求

问题分析 #

matDatepicker默认的日期解析逻辑会将不完整的输入（如仅两位数字的日）判定为无效日期，自动替换为当前日期，不符合输入11期望得到当月11日的需求。要解决这个问题，需要自定义日期解析逻辑，并捕获用户原始输入避免自动替换。

解决方案步骤 #

1. 自定义日期适配器（DateAdapter）

重写默认的日期解析方法，让两位数字输入被解析为当月对应日期，同时保留无效输入的处理逻辑。

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

export class CustomDateAdapter extends NativeDateAdapter {
  parse(value: any): Date | null {
    // 处理两位数字输入，解析为当月对应日期
    if (typeof value === 'string' && value.length === 2 && !isNaN(+value)) {
      const day = parseInt(value, 10);
      const currentDate = new Date();
      const targetDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);
      // 验证日期有效性（如31号在小月中无效）
      return targetDate.getDate() === day ? targetDate : null;
    }
    // 其他情况沿用默认解析逻辑
    return super.parse(value);
  }

  // 自定义日期显示格式（可选）
  format(date: Date, displayFormat: Object): string {
    if (displayFormat === 'input') {
      const day = date.getDate().toString().padStart(2, '0');
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const year = date.getFullYear();
      return `${year}-${month}-${day}`;
    }
    return super.format(date, displayFormat);
  }
}

// 配置自定义日期格式
export const CUSTOM_DATE_FORMATS = {
  parse: {
    dateInput: 'YYYY-MM-DD',
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

2. 在模块中注册自定义适配器和格式

在组件所属的NgModule的providers数组中配置：

import { NgModule } from '@angular/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
// 导入上面定义的适配器和格式

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

3. 监听输入框原始输入（可选，增强用户体验）

如果需要完全控制输入内容，避免无效输入被自动清空，可添加input事件监听：

HTML修改：

<mat-form-field class="col-2">
  <input [matDatepicker]="fromPicker" formControlName="fromPicker"
         id="search-date-from" matInput placeholder="Departure Date From"
         (input)="handleDateInput('fromPicker', $event)" />
  <mat-datepicker-toggle [for]="fromPicker" matSuffix></mat-datepicker-toggle>
  <mat-datepicker #fromPicker></mat-datepicker>
</mat-form-field>

<mat-form-field class="col-2">
  <input [matDatepicker]="toPicker" formControlName="toPicker"
         id="search-date-to" matInput placeholder="Departure Date To"
         (input)="handleDateInput('toPicker', $event)" />
  <mat-datepicker-toggle [for]="toPicker" matSuffix></mat-datepicker-toggle>
  <mat-datepicker #toPicker></mat-datepicker>
</mat-form-field>

TS逻辑：

handleDateInput(controlName: string, event: Event) {
  const inputElement = event.target as HTMLInputElement;
  const rawValue = inputElement.value;
  const control = this.myForm.get(controlName);

  if (rawValue.length === 2 && !isNaN(+rawValue)) {
    const day = parseInt(rawValue, 10);
    const currentDate = new Date();
    const targetDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);
    
    if (targetDate.getDate() === day) {
      // 有效日期，更新控件值
      control.setValue(targetDate, { emitEvent: false });
    } else {
      // 无效日期，保留用户输入并清空控件值
      control.setValue(null, { emitEvent: false });
      inputElement.value = rawValue;
    }
  } else if (!rawValue) {
    control.setValue(null, { emitEvent: false });
  }
}

4. 调整原有valueChanges逻辑

确保只在解析出有效日期时执行联动逻辑：

// 监听出发日期变更
this.myForm.get('fromPicker').valueChanges.subscribe((fromDate: Date) => {
  const toDateField = this.myForm.get('toPicker');
  if (toDateField && fromDate) {
    if (!toDateField.value) {
      toDateField.setValue(fromDate);
    }
    toDateField.updateValueAndValidity({ onlySelf: true, emitEvent: false });
  }
});

// 监听结束日期变更
this.myForm.get('toPicker').valueChanges.subscribe((toDate: Date) => {
  const fromDateField = this.myForm.get('fromPicker');
  if (fromDateField && toDate) {
    if (!fromDateField.value) {
      const today = new Date();
      const fromDate = toDate < today ? toDate : today;
      fromDateField.setValue(fromDate);
    }
    fromDateField.updateValueAndValidity({ onlySelf: true, emitEvent: false });
  }
});

关键说明 #

• 自定义DateAdapter是核心，通过重写parse方法覆盖默认的无效日期处理逻辑
• 若使用Luxon/Moment等日期库，需对应调整解析逻辑（如用DateTime.fromObject替代原生Date）
• 输入事件监听可确保用户原始输入不被自动替换，提升交互体验

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