Change language of Datepicker of Material Angular 4
Solution 1
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
Solution 2
import {MAT_DATE_LOCALE} from '@angular/material';
&
providers: [{ provide: MAT_DATE_LOCALE, useValue: 'es-ES' }]
Do this in tpv.modules.ts
Solution 3
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}],
})
Solution 4
Locale setting can be provided via MAT_DATE_LOCALE constant, but to change language dynamically you need to use DateAdapter as it is shown in https://material.angular.io/components/datepicker/overview#internationalization
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
constructor(private dateAdapter: DateAdapter<any>) {}
setFrench() {
// Set language of Datepicker
this.dateAdapter.setLocale('fr');
}
}
Here is another example when you need to configure locale from external script:
<script>
window.appConfig = {
language: 'fr',
// Other config options
// ...
};
<script>
<app-root></app-root>
In this case you should also use DateAdapter:
import {Injectable} from '@angular/core';
import {DateAdapter} from '@angular/material';
declare let window: any;
@Injectable()
export class AppConfigService {
appConfig = window.appConfig;
constructor(private dateAdapter: DateAdapter<any>) {
// Set language of Datepicker
this.dateAdapter.setLocale(this.appConfig.language);
}
}
Solution 5
For anyone who has a bug when editing input field (eg: putting DD/MM/YYYY will change it to MM/DD/YYYY or simply not working) create an adapter:
import { NativeDateAdapter } from '@angular/material';
export class FrenchDateProvider extends NativeDateAdapter {
parse(value: string) {
let it = value.split('/');
if (it.length == 3) {
return new Date(+it[2], +it[1] - 1, +it[0], 12);
}
}
format(date: Date, displayFormat: Object) {
return ('0' + date.getDate()).slice(-2) + '/' + ('0' + (date.getMonth() + 1)).slice(-2) + '/' + date.getFullYear();
}
}
Add it to your module as provider:
@NgModule({
providers: [
{ provide: DateAdapter, useClass: FrenchDateProvider }
]
})
export class SharedModule { }
Melchia
Full Stack developer. Technologies: Javascript, Typescript, C#, Python Angular, React, NextJS NodeJs, .Net core Rest, GraphQL MongoDB, PostgreSQL Azure Devops, Github actions, Jenkins. Docker
Updated on October 02, 2021Comments
-
Melchia over 2 years
How to Change language of Datepicker of Material Angular? I can't find in documentation for Angular material 2. Here is a plunkr https://plnkr.co/edit/unzlijtsHf3CPW4oL7bl?p=preview
<md-input-container> <input mdInput [mdDatepicker]="picker" placeholder="Choose a date"> <button mdSuffix [mdDatepickerToggle]="picker"></button> </md-input-container> <md-datepicker #picker></md-datepicker>