Angular Material Datepicker how to set month labels from format MMM to format MMMM (long)

0
votes

I want to change Angular Material datepicker month labels displaying. In default month view is in MMM format. I want to change to MMMM with custom MatDateFormats.

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

As in the example I tried to set MMMM everywhere, but the month names do not change the format.

2
javascriptangularangular-materialmaterial-designmaterial-ui

2 Answers

0
votes

for my custom date format I first define the formats like you did in the module:

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

and then do the following for the providers of the module:

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

you can use MomentDateAdapter:

Here is a example:

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)
  }
}

See here