Angular mat-date-picker日历内日期格式如何配置为YYYY-MM-DD

要修改Angular Material datepicker的全局日期显示格式，需要通过MAT_DATE_FORMATS注入令牌完成配置，推荐搭配MomentDateAdapter使用，格式自定义灵活性更高，具体操作步骤如下：

步骤1：安装必要依赖 #

如果还未安装Moment相关适配依赖，先执行安装命令：
npm install @angular/material-moment-adapter moment

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

在需要生效的模块文件（如app.module.ts）中定义格式配置常量：

import { MAT_DATE_FORMATS } from '@angular/material/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';

// 自定义YYYY-MM-DD格式规则
export const CUSTOM_DATE_FORMATS = {
  parse: {
    // 解析输入框日期的格式
    dateInput: 'YYYY-MM-DD',
  },
  display: {
    // 输入框显示的日期格式
    dateInput: 'YYYY-MM-DD',
    // 日历面板顶部的年月显示格式
    monthYearLabel: 'YYYY年MM月',
    // 无障碍访问的日期标签格式
    dateA11yLabel: 'YYYY-MM-DD',
    monthYearA11yLabel: 'YYYY年MM月',
  },
};

步骤3：注入配置到模块 #

在对应模块的@NgModule装饰器的providers数组中添加以下配置，即可全局生效：

@NgModule({
  // 其他模块配置（imports、declarations、bootstrap等）保持不变
  providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
  ]
})
export class AppModule { }

其他说明 #

• 如果不需要全局生效，仅要给单个组件的datepicker生效，把上述providers配置写到对应组件的@Component元数据的providers数组中即可
• 如果不想使用Moment适配器，也可以基于原生NativeDateAdapter自定义，但是原生API对自定义格式的支持度较低，需要重写format方法，更推荐使用Moment适配器方案

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