Angular Material DatePicker自定义格式下如何编辑时间值？

mat-datepicker本身是为日期选择设计的，默认处理逻辑会忽略时间部分，导致自定义格式后修改时间被重置。要解决这个问题，需要自定义DateAdapter来覆盖默认的解析和格式化逻辑，确保时间部分被正确保留和解析。

步骤1：自定义DateAdapter #

扩展NativeDateAdapter，重写parse和format方法，让它支持带时间的格式解析与显示：

import { NativeDateAdapter } from '@angular/material/core';
import { formatDate, parseDate } from '@angular/common';
import { Inject, LOCALE_ID } from '@angular/core';

export class CustomDateAdapter extends NativeDateAdapter {
  constructor(@Inject(LOCALE_ID) locale: string) {
    super(locale);
  }

  override parse(value: any): Date | null {
    if (!value) return null;
    // 优先用自定义的带时间格式解析
    const parsedDate = parseDate(value, 'DD/MM/yyyy HH:mm:ss', this.locale);
    if (parsedDate) return parsedDate;
    // 解析失败时回退到默认逻辑
    return super.parse(value);
  }

  override format(date: Date, displayFormat: Object): string {
    // 针对需要显示时间的场景使用自定义格式
    if (displayFormat === 'DD/MM/yyyy HH:mm:ss') {
      return formatDate(date, 'DD/MM/yyyy HH:mm:ss', this.locale);
    }
    return super.format(date, displayFormat as string);
  }
}

步骤2：配置自定义日期格式 #

定义包含时间的格式配置：

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

export const CUSTOM_DATE_FORMATS = {
  parse: {
    dateInput: 'DD/MM/yyyy HH:mm:ss',
  },
  display: {
    dateInput: 'DD/MM/yyyy HH:mm:ss',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

步骤3：在模块中注入自定义配置 #

在你的Angular模块（比如AppModule）中提供自定义的DateAdapter和格式配置：

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

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

原理说明 #

• 默认的NativeDateAdapter在解析日期时会自动清零时间部分，重写parse方法后可以正确解析包含时间的字符串。
• 自定义format方法确保显示的日期时间格式符合需求，同时保留原有时间信息。
• 当通过datepicker弹窗选择日期时，会保留之前输入的时间部分，不会被重置为0。

注意：输入框中修改时间时，必须严格遵循自定义格式（如DD/MM/yyyy HH:mm:ss），否则会解析失败，可添加表单验证提示用户输入正确格式。

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