如何让Angular日期选择器在JSON中仅输出YYYY-MM-DD格式？

问题出在Angular DatePicker默认会将选中的日期以Date或Moment对象形式存储，序列化时会带上时间信息。以下是两种可行的处理方式：

方法一：提交表单时手动格式化日期 #

在表单提交函数中，将日期字段转换为YYYY-MM-DD格式的字符串后再提交：

onSubmit() {
  const submitData = { ...this.yourForm.value };
  
  // 替换成你的日期表单控件名，比如'joinDate'
  const dateField = 'joinDate';
  if (submitData[dateField]) {
    // 使用moment格式化日期
    submitData[dateField] = moment(submitData[dateField]).format('YYYY-MM-DD');
  }

  // 这里执行提交逻辑，比如调用API
  // this.apiService.submitData(submitData).subscribe(...);
}

方法二：通过表单值变更自动转换 #

订阅表单控件的valueChanges事件，实时将日期值转换为目标格式，避免提交时再处理：

ngOnInit() {
  const dateControl = this.yourForm.get('joinDate');
  if (dateControl) {
    dateControl.valueChanges.subscribe(date => {
      if (date) {
        const formattedDate = moment(date).format('YYYY-MM-DD');
        // 关闭事件触发，防止循环更新
        dateControl.setValue(formattedDate, { emitEvent: false });
      }
    });
  }
}

注意事项 #

确保你已正确导入Moment相关依赖，并且MY_FORMATS配置生效：

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

export const MY_FORMATS = {
  parse: {
    dateInput: ['YYYY-MM-DD'],
  },
  display: {
    dateInput: 'L',
    monthYearLabel: 'YYYY',
    dateA11yLabel: 'L',
    monthYearA11yLabel: 'YYYY',
  },
};

// 在模块或组件的providers中配置
providers: [{ provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }]

内容的提问来源于stack exchange，提问作者Maurício