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

Posted 2023-05-07

【中文标题】日历内的角垫日期选择器格式

【英文标题】：Angular mat date picker format inside calendar

【发布时间】：2021-11-19 13:02:48

【问题描述】：

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

我现在有这种格式：

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

【参考方案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

【讨论】：

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