日历内的角垫日期选择器格式答案

【问题标题】：Angular mat date picker format inside calendar日历内的角垫日期选择器格式
【发布时间】：2021-11-19 13:02:48
【问题描述】：

我正在使用有角度的材料日期选择器，但日历内的格式有问题，找不到配置它的地方。

我现在有这种格式：

在哪里可以将其更改为如下格式：YYYY-MM-DD

【问题讨论】：

标签： angular-material datepicker

【解决方案1】：

按钮（带圆圈）是月份标签。

建议使用MomentDateModule 轻松自定义日期格式。

第 1 步：安装 @angular/material-moment-adapter。

npm install @angular/material-moment-adapter

第二步：将MatMomentDateModule导入AppModule

import { MatMomentDateModule } from '@angular/material-moment-adapter';

@NgModule({
  imports: [
    ...,
    MatMomentDateModule,
  ]
})
export class AppModule {}

第 3 步：为AppModule 或Component 提供自定义MY_FORMATS 到providers 部分。（以下代码为Component）

步骤 3.1：为 monthYearLabel 和 monthYearA11yLabel 提供所需的格式。

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

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

@Component({
  ...
  providers: [{ provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }]
})

Sample Solution on StackBlitz

参考文献

MomentDateModule formats

【讨论】：

我为我的输入字段设置了另一种自定义日期格式，但您的回答将日历弄乱了，但做了一些更改，现在可以使用了，谢谢！