Angular Material 5：如何将mat-datepicker日期自定义为MM/DD/YYYY格式？

我明白你遇到的困扰了——用原生日期模块时，按照官方文档配置后格式没生效，而且打印表单值还是Date对象而非期望的字符串格式。下面一步步帮你搞定：

1. 配置自定义日期格式 #

首先，你需要定义自己的日期格式常量，覆盖默认的配置。在你的组件文件里添加这个常量：

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

// 自定义日期格式
export const MY_DATE_FORMATS = {
  parse: {
    dateInput: 'MM/DD/YYYY', // 解析用户输入的格式
  },
  display: {
    dateInput: 'MM/DD/YYYY', // 输入框显示的格式
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

2. 在组件中注册配置 #

接下来，在组件的providers数组里提供DateAdapter和自定义的格式，这样Angular Material会使用你的配置：

import {Component} from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS, NativeDateAdapter } from '@angular/material/core';
import { DatePipe } from '@angular/common'; // 后面处理字符串格式会用到

export const MY_DATE_FORMATS = {
  parse: {
    dateInput: 'MM/DD/YYYY',
  },
  display: {
    dateInput: 'MM/DD/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

/** @title Basic datepicker */
@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
  styleUrls: ['datepicker-overview-example.css'],
  providers: [
    { provide: DateAdapter, useClass: NativeDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
    DatePipe // 注入DatePipe用于格式化Date对象
  ]
})
export class DatepickerOverviewExample {
  constructor(private datePipe: DatePipe) {}

  // 假设你通过表单控件获取选中日期，示例提交方法
  onSubmit(selectedDate: Date) {
    // 将Date对象转换为MM/DD/YYYY格式的字符串
    const formattedDate = this.datePipe.transform(selectedDate, 'MM/DD/YYYY');
    console.log(formattedDate); // 输出类似 "12/31/2017"
  }
}

3. 关于表单值的说明 #

要注意的是，MatDatePicker默认绑定的是Date对象，所以直接打印会得到类似Sun Dec 31 2017 00:00:00 GMT+0530 (IST)的输出。如果需要字符串格式的日期，必须通过DatePipe来转换，就像上面代码里的onSubmit方法那样。

如果是在模板中显示格式化后的日期，可以直接用date管道：

<p>Selected Date: {{ selectedDate | date:'MM/DD/YYYY' }}</p>

为什么之前的配置没生效？ #

大概率是你没在组件/模块的providers里正确注册DateAdapter和MAT_DATE_FORMATS，这一步是让Angular Material应用自定义格式的关键，一定要确保配置正确。

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