Angular 材料日期选择器 - 全月名称

Question

在我的项目中，我使用 mat-datepicker。 通过手动，我安装了“moment”和“@angular/material-moment-adapter”。 我在 app.module.ts 中添加了：

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

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'LL',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }
]

现在在选择器输入中，我以格式获取日期

12/31/2020

但我需要以格式显示日期

31 December, 2020

我还需要添加什么来做到这一点？

我找不到解释如何在 object 中设置自定义格式的手册

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'LL',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

Answer 1

您只需要在显示中通过dateInput: 'DD MMMM YYYY'更改dateInput:'LL' 。 像这样的东西：

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'DD MMMM YYYY',
    monthYearLabel: 'DD MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};