Angular Material Datepicker format DD-MM-YYYY

Asked on July 20, 2020
How to set Angular Material Datepicker format as DD-MM-YYYY ?

Replied on July 20, 2020
Follow the link

Use parse and display format as 

export const MY_DATE_FORMATS = {
    parse: {
      dateInput: 'DD-MM-YYYY',
    display: {
      dateInput: 'DD-MM-YYYY',
      monthYearLabel: 'MMM YYYY',
      dateA11yLabel: 'LL',
      monthYearA11yLabel: 'MMMM YYYY'

The dateInput format in display section is used to display date after selection from calendar.

display: {
      dateInput: 'DD-MM-YYYY'

The dateInput format in parse section is used for manual entry in Datepicker text input.

Configure MY_DATE_FORMATS in application module.

providers: [
  { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }

Replied on August 02, 2020
Thanks Amrendra.

Write Answer

©2024 | Privacy Policy | Contact Us