Angular NgxMatDatetimePickerModule日期时间格式显示异常（Chrome、Safari）

问题根因 #

当前输入框显示为默认的dd/mm/yyyy格式，本质是没有为NgxMatDatetimePicker组件指定自定义的格式配置，组件默认会跟随当前运行浏览器的本地日期解析、渲染规则，Chrome和Safari的原生日期处理逻辑差异就会导致显示格式不符合预期。

跨浏览器兼容修复实现 #

NgxMatDatetimePicker的显示、解析逻辑完全由模块级注入的格式配置和日期适配器控制，只要统一指定自定义规则，就能完全绕开浏览器原生能力的差异，实现Chrome、Safari下一致的显示效果。

• 第一步：定义符合需求的自定义日期格式常量
  按照需要的显示格式（比如示例中的YYYY-MM-DD HH:mm:ss），参考Angular Material的日期格式规则定义常量：

  // 自定义格式常量，可根据实际需求调整格式字符串
  export const CUSTOM_DATETIME_FORMATS = {
    parse: {
      dateInput: 'YYYY-MM-DD HH:mm:ss',
    },
    display: {
      dateInput: 'YYYY-MM-DD HH:mm:ss',
      monthYearLabel: 'YYYY年MM月',
      dateA11yLabel: 'LL',
      monthYearA11yLabel: 'YYYY年MM月',
    },
  };
  

• 第二步：实现Safari兼容的自定义日期适配器
  因为Safari对标准ISO格式日期字符串的解析存在兼容性问题，需要重写原生日期适配器的parse方法，统一解析逻辑：

  import { Injectable } from '@angular/core';
  import { NgxMatNativeDateAdapter } from '@angular-material-components/datetime-picker';
  
  @Injectable()
  export class CrossBrowserDateAdapter extends NgxMatNativeDateAdapter {
    override parse(value: unknown): Date | null {
      // 字符串格式日期统一手动解析，避免Safari原生解析报错
      if (typeof value === 'string' && value.trim()) {
        const dateParts = value.split(/[-T:\s]/);
        if (dateParts.length >= 3) {
          return new Date(
            Number(dateParts[0]),
            Number(dateParts[1]) - 1,
            Number(dateParts[2]),
            Number(dateParts[3] || 0),
            Number(dateParts[4] || 0),
            Number(dateParts[5] || 0)
          );
        }
      }
      return super.parse(value);
    }
  }
  

• 第三步：在引入NgxMatDatetimePickerModule的模块中注入自定义配置
  替换组件默认的格式和适配器配置，注意如果是多个模块都用到该选择器，建议把配置放在根模块AppModule中全局生效：

  import { NgxMatDatetimePickerModule, NGX_MAT_DATE_FORMATS } from '@angular-material-components/datetime-picker';
  
  @NgModule({
    imports: [
      // 原有模块引入逻辑保持不变，包含NgxMatDatetimePickerModule
    ],
    providers: [
      // 替换默认格式为自定义格式
      { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATETIME_FORMATS },
      // 替换默认适配器为跨浏览器兼容版本
      { provide: NgxMatNativeDateAdapter, useClass: CrossBrowserDateAdapter }
    ]
  })
  export class AppModule {}
  

现有模板代码的适配说明 #

• 现有模板中的input、选择器组件属性完全不需要修改，配置注入完成后，输入框会自动按照自定义格式渲染选中的日期时间值，不会再出现默认的dd/mm/yyyy显示效果。
• 若后续需要调整显示格式，只需要修改CUSTOM_DATETIME_FORMATS中dateInput字段的格式字符串即可，无需改动模板代码。
• 配置完成后，Chrome和Safari下的日期解析、显示逻辑将完全统一，不会再出现格式不一致、解析报错的问题。

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