Angular Material Datepicker, как установить метки месяца из формата MMM в формат MMMM (длинный) - PullRequest
Новая
       47

Angular Material Datepicker, как установить метки месяца из формата MMM в формат MMMM (длинный)

0 голосов
/ 04 ноября 2019

Я хочу изменить отображение меток месяца углового материала. По умолчанию просмотр месяца в формате MMM. Я хочу перейти на MMMM с пользовательскими MatDateFormats. 

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

Как и в примере, я пытался установить MMMM везде, но названия месяцев не меняют формат.

Ответы [ 2 ]

0 голосов
/ 04 ноября 2019

вы можете использовать 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)
  }
}

См. здесь

0 голосов
/ 04 ноября 2019

для моего пользовательского формата даты. Сначала я определяю форматы, которые вы указали в модуле: 

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 },
    ]
...