Angular 7 Mat datepicker - How to change the name of the month from short to long:

Question

I need help, tried so many things but didn't help. I use Angular 7 Mat datepicker, and really want to know how to change the name of the month from short to long:

Thanks in advance for your help.

Answer 1

as far i know the only formats you can configure using the Date Picker Component are this ones: https://material.angular.io/components/datepicker/overview#accessibility

@NgModule({
  imports: [MatDatepickerModule, MomentDateModule],
  providers: [
    {
      provide: MAT_DATE_FORMATS,
      useValue: {
        parse: {
          dateInput: ['l', 'LL'],
        },
        display: {
          dateInput: 'L',
          monthYearLabel: 'MMM YYYY',
          dateA11yLabel: 'LL',
          monthYearA11yLabel: 'MMMM YYYY',
        },
      },
    },
  ],
})
export class MyApp {}

ref: MAT_DATE_FORMATS definition/meaning of fields

if you wanna know where this ones came from or how the syntax is done check this link: https://momentjs.com/docs/#/displaying/format/

if you still wanna try to change it, you can try to overwrite the monthShort from moment.js which is the library that use this component to works:

moment.updateLocale('en', {
    months : [
        "January", "February", "March", "April", "May", "June", "July",
        "August", "September", "October", "November", "December"
    ]
});

take in account that this label as u can see above works with locale

  constructor(@Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string) {
    super();
    this.setLocale(dateLocale || moment.locale());
  }

  setLocale(locale: string) {
    super.setLocale(locale);

    let momentLocaleData = moment.localeData(locale);
    this._localeData = {
      firstDayOfWeek: momentLocaleData.firstDayOfWeek(),
      longMonths: momentLocaleData.months(),
      shortMonths: momentLocaleData.monthsShort(),
      dates: range(31, (i) => this.createDate(2017, 0, i + 1).format('D')),
      longDaysOfWeek: momentLocaleData.weekdays(),
      shortDaysOfWeek: momentLocaleData.weekdaysShort(),
      narrowDaysOfWeek: momentLocaleData.weekdaysMin(),
    };
  }