Angular 日历中的 mat-date-picker 格式

Question

我正在使用 Angular Material 日期选择器，但日历中的格式有问题，找不到配置它的地方。

我现在有这个格式：

在哪里可以将其更改为类似 YYYY-MM-DD 的格式

Answer 1

按钮（圆圈）是月年标签。

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

步骤 1：安装@angular/material-moment-adapter.

npm install @angular/material-moment-adapter

步骤 2：将 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

Angular 日历中的 mat-date-picker 格式

Angular mat-date-picker format inside calendar

datepicker

angular-material

angular

mat-datepicker

参考资料