Angular 6 Material – MatDatePicker italian format dd/MM/yyyy

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
app.module.ts

//Some import before, add this 
import {
    DateAdapter,
    MAT_DATE_FORMATS,
    MAT_DATE_LOCALE
} from '@angular/material';
import {
    MomentDateModule,
    MomentDateAdapter
} 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 
@NgModule({
    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.

Cicciokr

"Javascript is to Java as hamburger is to ham; both are delicious, but they don't have much in common except a name" I'm javascript lovers and this is my site on witch sometimes write about my experience, when i have some free time, and remember: "Homo faber fortunae suae"

  1. Snehitha

    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. Snehitha

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

  3. Edwin

    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. Cicciokr

    @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. Miriano Esposito

    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. Deepak Tiwari

    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. hazem

    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?

    thanks

Write a Comment

Your email address will not be published.