Angular项目中如何将Material日期选择器日期转为yyyy/mm/dd格式？

1. 使用 Angular 内置的 DatePipe #

Angular 提供了 DatePipe 可直接完成日期格式转换，无需额外依赖。

操作步骤： #

• 从 @angular/common 导入 DatePipe：

  import { DatePipe } from '@angular/common';
  

• 在组件构造函数中注入 DatePipe：

  constructor(private datePipe: DatePipe) { }
  

• 调用 transform 方法转换格式（注意：MM 代表两位数月份，小写 mm 是分钟，不要混淆）：

  const selectedDate = new Date('Thu Jan 01 1970 01:00:00 GMT+010');
  const formattedDate = this.datePipe.transform(selectedDate, 'yyyy/MM/dd');
  // 输出结果："1970/01/01"
  

2. 直接配置 Angular Material 日期选择器的输出格式 #

如果希望日期选择器直接返回指定格式的字符串，而非先获取 Date 对象再转换，可通过自定义 MAT_DATE_FORMATS 实现：

操作步骤： #

• 创建自定义格式配置：

  import { MAT_DATE_FORMATS } from '@angular/material/core';
  
  export const MY_DATE_FORMATS = {
    parse: {
      dateInput: 'yyyy/MM/dd',
    },
    display: {
      dateInput: 'yyyy/MM/dd',
      monthYearLabel: 'MMM yyyy',
      dateA11yLabel: 'LL',
      monthYearA11yLabel: 'MMMM yyyy',
    },
  };
  

• 在组件或模块的 providers 数组中提供该配置：

  @Component({
    // 其他组件配置项
    providers: [
      { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }
    ]
  })
  export class YourComponent { }
  

配置完成后，日期选择器绑定的变量会直接返回 yyyy/MM/dd 格式的字符串。

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