Material Angular is very very useful library to generate beautiful app with material design and use all the power of angular.
Today we can see how to set the format for the MatDatePicker with dd/MM/yyyy so how to customize it, then you can change it.

In our Angular 6 project we must to install moment.
So execute in our project directory:

npm i @angular/material-moment-adapter 
npm add moment

Then we must to open our

//Some import before, add this 
import {
} from '@angular/material';
import {
} from '@angular/material-moment-adapter';
//create our cost var with the information about the format that we want 
export const MY_FORMATS = {
    parse: {
        dateInput: 'DD/MM/YYYY',
    display: {
        dateInput: 'DD/MM/YYYY',
        monthYearLabel: 'MM YYYY',
        dateA11yLabel: 'DD/MM/YYYY',
        monthYearA11yLabel: 'MM YYYY',
//in our ngmodule providers add the provide for the date 
    imports: [............],
    providers: [{
            provide: MAT_DATE_LOCALE,
            useValue: 'it'
        //you can change
        useValue {
            provide: DateAdapter,
            useClass: MomentDateAdapter,
            deps: [MAT_DATE_LOCALE]
        }, {
            provide: MAT_DATE_FORMATS,
            useValue: MY_FORMATS
    bootstrap: [AppComponent]
export class AppModule {}

At the end all the date in our project became with the format dd/mm/yyyy!!
Some question contact me.


  1. Hey Thanks, that helped a lot, i am trying to get a format to get this format, but not being able to progress dd-MMM-yyyy

  2. @Cicciokr, have already tried that, doesnt work since it returns an error which says replace.format cannot be found or something similar.

  3. Gracias por la forma de cambiar el formato, sin embargo, al momento e trabajar con las fecha se me aumenta un dia … como puedo solucionar esto

  4. @Edwin i think that your problem is about GMT, your date is “aumenta un dia” but when you save it on your database or when you read your date from database?
    I suggest to you to console.log() your date.

  5. Ciao e grazie per l’articolo. Ho fatto come hai scritto ma la data viene visualizzata con un solo numero per giorno e mese quando minore di 10 (es 2/8/2019)

  6. Hello Thanks Bro, that helped a lot, i am trying to get a format to get this format, but not being able to progress dd-mm-yyyy

  7. hello Cicciokr,

    Thanks for your efforts, I have a problem when i type the date directly in the calendar like this 28/11/2020, the calendar became red but when i change the typed date in 08/11/2020 it works fine, have you an idea how I can handle that?


Leave a Reply

Your email address will not be published. Required fields are marked *