Javascript 角度材质日期选择器如何将月份标签从格式MMM设置为格式MMMM（长）

我想更改角度材质日期选择器月份标签的显示。默认情况下，月视图为MMM格式。 我想使用自定义MatDateFormats更改为MMMM

 export const APP_DATE_FORMATS: MatDateFormats = {
  parse: {
    dateInput: 'MMMM'
  },
  display: {
    dateInput: 'MMMM',
    monthYearLabel: 'MMMM',
    dateA11yLabel: 'MMMM',
    monthYearA11yLabel: 'MMMM'
  }
};

---

与示例中一样，我尝试在所有地方设置MMMM，但月份名称不会更改格式。

对于我的自定义日期格式，我首先定义格式，就像您在模块中所做的那样：

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

    providers: [
        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
    ]

然后对模块的提供程序执行以下操作：

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

    providers: [
        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
    ]

---

您可以使用MomentDateAdapter：

以下是一个例子：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material';
import * as _moment from 'moment';
import { default as _rollupMoment } from 'moment';


const moment = _rollupMoment || _moment;

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


@Component({
  selector: 'app-datepicker1',
  templateUrl: './datepicker1.component.html',
  styleUrls: ['./datepicker1.component.css'],
  providers: [

    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },

    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
  ],
})
export class Datepicker1Component implements OnInit {

  @Output() date1: EventEmitter<any> = new EventEmitter<any>();

  date = new FormControl(moment());


  constructor() { }

  ngOnInit() {
  }

  change(dateEvent) {
    this.date1.emit(dateEvent.value)
  }
}

从'@angular/core'导入{Component，OnInit，Output，EventEmitter}；
从'@angular/forms'导入{FormControl}；
从“@角度/材料力矩适配器”导入{MomentDateAdapter}；
从“@angular/material”导入{DateAdapter，MAT_DATE_格式，MAT_DATE_LOCALE}；
从“时刻”导入*作为“时刻”；
从“矩”导入{默认为_rollupmonent}；
常数矩=|汇总矩| | |矩；
导出常量MY_格式={
解析：{
dateInput:'MM/YYYY'，
},
显示：{
dateInput:'MM/YYYY'，
monthYearLabel:“MMM YYYY”，
dateA11yLabel:'LL'，
Monthyear11ylabel:'MMMM YYYY'，
},
};
@组成部分({
选择器：“app-datepicker1”，
templateUrl:'./datepicker1.component.html'，
样式URL:['./datepicker1.component.css']，
供应商：[
{提供：DateAdapter，useClass:MomentDateAdapter，deps:[MAT_DATE_LOCALE]}，
{提供：MAT_DATE_FORMATS，useValue:MY_FORMATS}，
],
})
导出类DatePicker1组件实现OnInit{
@Output（）date1:EventEmitter