Change language of Datepicker of Material Angular 4
import {MAT_DATE_LOCALE} from '@angular/material';
&
providers: [{ provide: MAT_DATE_LOCALE, useValue: 'es-ES' }]
Do this in tpv.modules.ts
md-datepicker provides setLocale
method which can be used to set any language (list of locale).
Here's an example of setting locale to 'fr':
export class DatepickerOverviewExample { constructor(private dateAdapter: DateAdapter<Date>) { this.dateAdapter.setLocale('fr'); }}
One thing to keep in mind, md-datepicker's default date parsing format is mm/dd/yyyy
, so if a locale has a different date format (for 'fr' its dd/mm/yyyy
), we will need to define a class that extends NativeDateAdapter
to parse the new date format. Without setting the proper date format, there will be an issue like this question.
import { NativeDateAdapter, DateAdapter, MD_DATE_FORMATS } from "@angular/material";export class FrenchDateAdapter extends NativeDateAdapter { parse(value: any): Date | null { if ((typeof value === 'string') && (value.indexOf('/') > -1)) { const str = value.split('/'); if (str.length < 2 || isNaN(+str[0]) || isNaN(+str[1]) || isNaN(+str[2])) { return null; } return new Date(Number(str[2]), Number(str[1]) - 1, Number(str[0]), 12); } const timestamp = typeof value === 'number' ? value : Date.parse(value); return isNaN(timestamp) ? null : new Date(timestamp); }}@Component({ ... providers: [{provide: DateAdapter, useClass: FrenchDateAdapter}],})
Sorry this should be a comment but I don't have the minimum reputation required.
Here is a good blog post on DatePicker including using it with moment.js as @Gregor Doroschenko mentioned in the above comment.
https://blog.angular.io/taking-advantage-of-the-angular-material-datepicker-237e80fa14b3