Angular Material Datepicker internationalization example doesn't work

Question

This example is in Angular Material documentation for dynamically changing locale for date picker component. But it doesn't work. What's weird is that the code snippet on documentation page works but the stackblitz doesn't.

Answer 1

If you want to change the language of your component you need to declare in your Constructor the DateAdapter, and you set the language like this:

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

In my example i set the language in Italian.

Answer 2

There seem to be some issues in angular DateAdapter according local settings.

E.g.:

• https://github.com/angular/components/issues/12891
• https://github.com/angular/components/issues/15419
• https://github.com/angular/components/issues/15564

As workaround the logic moved into a lazy loaded module seems to work

Demo Stackblitz

1. Clicking the "test" link loads the lazy /test route. Both, app.module and lazy.module import SharedModule which imports the Material stuff.
2. The datepicker is in English by default. Clicking the button "set locale on app module" should set it to German, but it doesn't.
3. Clicking the button "set locale in lazy module" however works as expected.

Workaround sources:

https://github.com/angular/components/issues/12891#issue-355191637

https://github.com/angular/components/issues/15419#issuecomment-491772822

Answer 3

It is possible to change locale dynamically for Angular material date picker.

working example - https://codesandbox.io/s/material-date-locale-jyylz