How to change Mat-Datepicker date format to DD/MM/YYYY in simplest way?
use dateadapter from core
import { DateAdapter } from '@angular/material/core';
constructor(private dateAdapter: DateAdapter<Date>) {
this.dateAdapter.setLocale('en-GB'); //dd/MM/yyyy
}
`
First, bind the format to your mat-datepicker.
export const MY_FORMATS = {
parse: {
dateInput: 'LL'
},
display: {
dateInput: 'YYYY-MM-DD',
monthYearLabel: 'YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'YYYY'
}
};
along with this you need to import and provide the modules.
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material';
import { MomentDateModule, MomentDateAdapter } from '@angular/material-moment-adapter';
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }
And in HTML follow this simply.
<mat-form-field>
<input
matInput
[matDatepicker]="dp"
placeholder="Verbose datepicker
[formControl]="date"
>
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
<mat-datepicker #dp></mat-datepicker>
</mat-form-field>
The easiest way is to change the locale:
Add the following to the providers section of your module:
{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }