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.

15
Leave a Reply

avatar
15 Comment threads
0 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
13 Comment authors
YojhanMiriano EspositoJosipMikeLeftPedro Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
coni
Guest
coni

Gracias, al fin pude encontrar un buen ejemplo

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

Cicciokr
Guest
Cicciokr
Snehitha
Guest
Snehitha

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

Budisan
Guest
Budisan

Thank you, long time I searched to Google, this is the best..

Gurpreet Singh
Guest
Gurpreet Singh

Thanks. That was really helpful!

Edwin
Guest
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

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

code android example
Guest

date fomat value in angular https://codejavaexample.blogspot.com

sga
Guest
sga

thank you so much…………….

Pedro
Guest
Pedro

Man… you’re a genius! Thanks!

MikeLeft
Guest
MikeLeft

Tks Francesco! Really really helpful!

Josip
Guest
Josip

Great article! Is there some way to also add hours, minutes and seconds?

Miriano Esposito
Guest
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)

Yojhan
Guest
Yojhan

Thank you so much! Finally I found a good example!