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.
Gracias, al fin pude encontrar un buen ejemplo
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
@snehitha you can use this guide https://medium.com/@esanjiv/working-with-custom-dateadapter-for-angular-material-2-datepicker-76d4446277dc
@Cicciokr, have already tried that, doesnt work since it returns an error which says replace.format cannot be found or something similar.
Thank you, long time I searched to Google, this is the best..
Thanks. That was really helpful!
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
@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.
date fomat value in angular https://codejavaexample.blogspot.com
thank you so much…………….
Man… you’re a genius! Thanks!
Tks Francesco! Really really helpful!
Great article! Is there some way to also add hours, minutes and seconds?
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)
Thank you so much! Finally I found a good example!
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
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
Grazie mille, ha funzionato alla perfezione 😀