5

I am currently reading about internationalization of the ng-bootstrap components. Their documentation says for the datepicker:

Since the 2.0.0 release datepicker will use the application locale if it is present to get translations of weekdays and month names. The internal service that does translation is called NgbDatepickerI18n and you could provide your own implementation if necessary.

(ng-bootstrap website)

Looking at the Angular i18n documentation, it states:

If you want to import locale data for other languages, you can do it manually:

src/app/app.module.ts

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

// the second parameter 'fr' is optional
registerLocaleData(localeFr, 'fr');

(Angular website)

But why is it not working for me? Do I still have to make a custom implementation of NgbDatepickerI18n, or am I missing something?

Here is an example playground:

https://stackblitz.com/edit/angular-mezpyn?file=app%2Fdatepicker-popup.module.ts

andreas
  • 7,844
  • 9
  • 51
  • 72

1 Answers1

5

I had the same problem and becuase there's no answer, this is the solution:

After importing and registering the locale data as you did, in app.module.ts you need to add

providers: [
    { provide: LOCALE_ID, useValue: 'fr-FR' },
    ... other providers
],

The documentation doesn't make it clear in my opinion.

alex
  • 3,412
  • 2
  • 28
  • 36
  • 1
    I wish I can upvote this more than one time. Finally someone who know how to change the language with using the I18n data. – sirzento Feb 12 '20 at 10:04
  • Where `LOCALE_ID` is imported from `@angular/core`. I just noticed this answer now, thank you! – andreas Feb 12 '20 at 23:55
  • do you have a working example for that? In the stackblitz above the days are still in english. – user2622344 Jul 13 '20 at 12:43
  • @user2622344 refer to https://stackblitz.com/edit/angular-mezpyn-b6tm1r?file=app%2Fdatepicker-popup.html for a working sample – Husni Jabir Oct 05 '21 at 17:34
  • I've done this as you said like this { provide: LOCALE_ID, useValue: 'fr-FR' }, { provide: LOCALE_ID, useValue: 'en-EN' }, { provide: LOCALE_ID, useValue: 'nl-NL' } but datepicker is only using the last provider I declare (nl) and is not reacting to application language change. What am I missing? – César Castro Aroche Nov 18 '21 at 11:11