CODEWITHSUNDEEP
angulartypescriptlocalizationlocaledatetimepicker
deeini
deeini

Reputation: 75

Set locale in angular2-material-datepicker

I am trying to set locale for angular2-material-datepicker. I have gone through many posts which refer $mdDateLocaleProvider. But I do not know how to incorporate this using typescript. We are developing our project using Angular2.

Upvotes: 2

Views: 10814

Answers (5)

Laura Caroline
Laura Caroline

Reputation: 86

A little late, but in case someone still needs, the following post shows how to set it:

https://medium.com/@kristinahertmann/multi-language-date-formats-with-angular-material-b8598415d117

in resume would be this:

constructor(private translate: TranslateService, private dateAdapter: DateAdapter<Date>) {}

useLanguage(language: Languages): void{
   this.translate.use(language);
   this.dateAdapter.setLocale(language);
}

Upvotes: 1

KaiserKatze
KaiserKatze

Reputation: 1569

You should install both @angular/material-moment-adapter and moment in your project!
Execute the following commands in your project directory:

npm install @angular/material-moment-adapter
npm install moment

Then you need to update your app.module.ts as followed if you want set locale globally for your app:

import {Component} from '@angular/core';
import {MAT_MOMENT_DATE_FORMATS, MomentDateAdapter} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';

/** @title Datepicker with different locale */
@NgModule({
  declarations: [],
  imports: [],
  entryComponents: [],
  providers: [
    // The locale would typically be provided on the root module of your application. We do it at
    // the component level here, due to limitations of our example generation script.
    {provide: MAT_DATE_LOCALE, useValue: 'ja-JP'},

    // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
    // `MatMomentDateModule` in your applications root module. We provide it at the component level
    // here, due to limitations of our example generation script.
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
  ],
})
export class AppModule {
  constructor(private adapter: DateAdapter<any>) {}

  setDateAdapterLocale(localeString: string): void {
    this.dateAdapter.setLocale(localeString);
  }
}

Reference:
1. Datepicker | Angular Material
2. Moment | Github
3. @angular/material-moment-adapter | npm

Upvotes: 4

Dr4gon
Dr4gon

Reputation: 421

Editing the app.module.ts doesn't provide locale changes during runtime. After some debugging and this ticket I figured out that this works

export class AppComponent {

constructor(private dateAdapter: DateAdapter<Date>) {
   dateAdapter.setLocale('de');
}

You can certainly do that in any other component you use for localization.

Upvotes: 5

d1no
d1no

Reputation: 143

Add the following line to app.module.ts providers:

{provide: MAT_DATE_LOCALE, useValue: 'de-DE'}

Upvotes: 0

Paxsentry
Paxsentry

Reputation: 193

Try to add 

{ provide: LOCALE_ID, useValue: "en-GB" }

to your provider, in app.module.

Upvotes: 4

Related Questions