如何让Mat Date-Picker支持解析Unix时间戳？

问题分析 #

你当前配置的MAT_DATE_FORMATS中，parse.dateInput设为'X'（对应秒级Unix时间戳）但无法解析时间戳，核心原因是默认MomentDateAdapter对纯数字输入的处理逻辑不会自动识别为时间戳，需要手动扩展适配器来处理数字类型的时间戳输入。

解决步骤 #

1. 自定义Moment日期适配器 #

创建一个扩展MomentDateAdapter的自定义适配器，专门处理数字类型的时间戳：

import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { Moment } from 'moment';
import * as moment from 'moment';

export class CustomMomentDateAdapter extends MomentDateAdapter {
  override parse(value: any, parseFormat: string | string[]): Moment | null {
    // 处理数字类型的时间戳输入
    if (typeof value === 'number') {
      // 自动判断秒级/毫秒级：数值小于1e12（13位）视为秒级，否则为毫秒级
      return value < 1000000000000 ? moment.unix(value) : moment(value);
    }
    // 调用父类逻辑处理非数字输入
    return super.parse(value, parseFormat);
  }
}

2. 更新组件/模块的Providers配置 #

替换原有的DateAdapter为自定义适配器，并在MAT_DATE_FORMATS中同时支持秒级（X）和毫秒级（x）时间戳格式：

import { NgModule } from '@angular/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';
import { CustomMomentDateAdapter } from './custom-moment-date-adapter';
import { MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';

@NgModule({
  imports: [MatDatepickerModule, MatInputModule, MatNativeDateModule],
  providers: [
    {
      provide: DateAdapter,
      useClass: CustomMomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
    },
    { 
      provide: MAT_DATE_FORMATS, 
      useValue: {
        parse: {
          dateInput: ['X', 'x'], // 同时兼容秒级和毫秒级时间戳
        },
        display: {
          dateInput: 'DD/MM/YYYY',
          monthYearLabel: 'MMM YY',
          dateA11yLabel: 'LL',
          monthYearA11yLabel: 'MMMM YYYY',
        },
      } 
    },
  ],
})
export class YourModule { }

3. 确保依赖安装 #

确认已安装必要的依赖包：

npm install moment @angular/material-moment-adapter

关键说明 #

• 大写X对应秒级Unix时间戳，小写x对应毫秒级时间戳，配置中同时添加可兼容两种输入
• 自定义适配器的parse方法直接拦截数字类型输入，通过数值大小自动判断时间戳单位，避免默认解析逻辑的限制

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