2

In my project, I am using mat-datepicker. By manual, I installed "moment" and "@angular/material-moment-adapter". To app.module.ts I added:

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

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

providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }
]

now in pickers input I am getting the date in the format

12/31/2020

but I need the date to be displayed in the format

31 December, 2020

What else do I need to add to do this?

I can't find a manual that explains how to set custom formats in object

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'LL',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};
Alex
  • 409
  • 3
  • 18
  • Can you please provide your full component file(s), because [the example provided by Angular Material](https://stackblitz.com/angular/jlbylrdrjgq?file=src%2Fapp%2Fdatepicker-formats-example.ts) is pretty clear and works. – Roy Dec 18 '20 at 20:39

1 Answers1

0

You just need to change dateInput:'LL' by dateInput: 'DD MMMM YYYY' in display. Something like this:

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'DD MMMM YYYY',
    monthYearLabel: 'DD MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};
antoineso
  • 2,063
  • 1
  • 5
  • 13
  • @Alex first Merry xmas. I made this [stackblitz](https://stackblitz.com/edit/angular-sijm1s?file=src/app/datepicker-formats-example.ts) and this answer seems to work. – antoineso Dec 25 '20 at 18:51