Datepicker Material Angular: Как я могу отобразить полное название месяца?

Question

Я использую компонент Datepicker (Материал) в моем приложении Angular. В частности, я использую компонент представления месяца (Вот пример Stackblitz ). Как я могу отобразить полное название месяца? Я хочу такой результат, как: январь, февраль и т. Д. c. Кто-нибудь может мне помочь?

Answer 1

Изменить файл ts следующим образом

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

export const MY_FORMATS = {
  display: {
    dateInput: 'LL'
  },
};

@Component({
  selector: 'datepicker-start-view-example',
  templateUrl: 'datepicker-start-view-example.html',
  styleUrls: ['datepicker-start-view-example.css'],
  providers: [
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },

    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
})
export class DatepickerStartViewExample {
  startDate = new Date(2020, 0, 1);
}

Answer 2

Для этого можно использовать форматы даты момента

// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/
export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'LL',
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

Полный пример

https://stackblitz.com/angular/jejdvdkrbgl?file=src%2Fapp%2Fdatepicker-formats-example.ts

Answer 3

Вы можете импортировать

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

в свой NgModule, объявить свои пользовательские форматы следующим образом:

const MY_FORMATS  = {
    parse: { dateInput: 'DD/MM/YYYY' },
    display: {
        dateInput: 'DD/MM/YYYY',
        monthYearLabel: 'MMMM YYYY',
        dateA11yLabel: 'DD/MM/YYYY',
        monthYearA11yLabel: 'MM YYYY',
    }
}

И затем предоставить их в разделе импорта вашего модуля следующим образом:

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

    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ]

В верхнем левом углу указателя даты будет показан полный месяц.

Я обновил приведенный вами пример plunkr здесь

К сожалению, нет возможности дополнительно настроить даты, отображаемые в средстве выбора даты. Как вы можете видеть здесь тип MatDateFormats позволяет настраивать только эти 4 свойства отображения.

Answer 4

Пожалуйста, проверьте это содержимое mat-datepicker-date-format

Вы ищете этот формат для форматирования даты? или, если нет, пожалуйста, дайте мне знать точное место, где вам нужно изменить.