Multiple dateInput formats on mat-datepicker

Issue

I'm creating two mat-datepickers, one with the format "MM/YYYY" and another with the format "DD/MM/YYYY",but i can't configure both formats in the module.

I tried to put in one module the settings for MM/YYYY and in the app module the settings for DD/MM/YYYY.

Code 1:

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

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

Code 2:

export const MY_FORMATS = {
  parse: {
    dateInput: 'DD/MM/YYYY',
  },
  display: {
    dateInput: 'DD/MM/YYYY',
    monthYearLabel: 'DD MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'DD MMMM YYYY',
  },
};
...
providers: [{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{provide: MAT_DATE_FORMATS, useValue: MY_FORMATS}]
})

If i use the DD/MM/YYYY format in the settings,all dates show as DD/MM/YYYY,if i don't use,all dates show as MM/YYYY. What should i do to show one date as MM/YYYY and another as DD/MM/YYYY?

Solution

Have you read this yet? https://medium.com/@kristinahertmann/multi-language-date-formats-with-angular-material-b8598415d117

Working stackblitz for this example can be found HERE.

Answered By - Tan Nguyen