如何在Angular Material中用Moment修改日期选择器表单控件值格式

我完全懂你的痛点——表单字段多的情况下，挨个遍历控件格式化日期实在太繁琐，就想直接把form.value传给API，拿到纯日期格式的字符串。其实我们可以通过自定义MAT_DATE_FORMATS的配置，让日期选择器直接把模型值转换成YYYY-MM-DD格式的字符串，不用额外处理。

步骤1：确保依赖安装正确 #

首先要确保你已经安装了Moment和Angular Material的Moment适配器：

npm install @angular/material-moment-adapter moment

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

关键是在MAT_DATE_FORMATS里添加valueAccessor的配置，指定模型值的输出格式。这样日期选择器会直接把选中的日期转换成字符串，而不是保留Moment实例（这就是之前转JSON会带时间的核心原因）。

创建一个日期格式的常量文件（比如date-formats.ts）：

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

// 自定义日期格式，重点是valueAccessor配置
export const MY_DATE_FORMATS = {
  parse: {
    dateInput: 'YYYY-MM-DD', // 解析用户输入的日期格式
  },
  display: {
    dateInput: 'YYYY-MM-DD', // 日期选择器输入框显示的格式
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
  valueAccessor: {
    dateInput: 'YYYY-MM-DD', // 核心配置：让模型值直接返回这个格式的字符串
  }
};

步骤3：在模块中提供配置 #

在你的模块（比如AppModule或者功能模块）里，注册Moment日期适配器和自定义的格式：

import { NgModule } from '@angular/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { MY_DATE_FORMATS } from './date-formats';

@NgModule({
  imports: [
    // ...其他必要模块
    MatDatepickerModule,
    MatMomentDateModule, // 导入Moment日期适配器模块
  ],
  providers: [
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE]
    },
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
  ],
})
export class AppModule { }

为什么这样能解决问题？ #

默认情况下，Moment日期适配器会把表单控件的模型值保留为Moment对象，当你把form.value转成JSON时，Moment对象会被序列化成带时间的ISO字符串（比如"2018-01-16T15:44:33.897Z"）。

通过配置valueAccessor.dateInput，我们告诉适配器在获取模型值时，自动把Moment对象格式化为YYYY-MM-DD的字符串。这样form.get('yourDateControl').value直接就是"2018-01-16"，转JSON时自然就是你需要的纯日期格式，完全不用遍历表单控件处理。

关于StackBlitz的问题 #

StackBlitz有时候会因为依赖缓存、版本不兼容导致配置不生效，你可以尝试：

• 重新安装依赖（点击StackBlitz左侧的Dependencies，重新安装@angular/material-moment-adapter和moment）
• 检查package.json里的依赖版本是否和你本地环境一致

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