CODEWITHSUNDEEP
angulartwitter-bootstrapngx-bootstrap
user9192087
user9192087

Reputation:

How to use ngx_bootstrap datepicker with french version

I'm using ngx-bootstrap datepicker in my angular project. I want to use the French version of datepicker, but it always gives me the English version. Here's my code :

html :

 <input type='text' class="form-control" placeholder="Date de l'aller :" bsDatepicker formControlName="dateDepart" />

component.ts:

import { defineLocale } from 'ngx-bootstrap/chronos';
import { fr } from 'ngx-bootstrap/locale';
defineLocale('fr', fr);

Any help, please, on how to use the French ngx-boostrap datepicker version?

Upvotes: 7

Views: 14503

Answers (3)

Luis Olivares
Luis Olivares

Reputation: 231

For Spanish (Datepicker), add this code to app.module :

import { BsDatepickerModule, BsLocaleService } from 'ngx-bootstrap/datepicker';
import { defineLocale } from 'ngx-bootstrap/chronos';
import { esLocale } from 'ngx-bootstrap/locale';
defineLocale('es', esLocale);

export class AppModule { 
  constructor( private bsLocaleService: BsLocaleService){
    this.bsLocaleService.use('es');//fecha en español, datepicker
  }

}

Upvotes: 8

Tore Aurstad
Tore Aurstad

Reputation: 3826

It is also possible to set up locales for ngx-bootstrap datepicker in modules of Angular.

First we import our locale(s) in app.module.ts : 

import { defineLocale } from "ngx-bootstrap/chronos";
import { nbLocale } from "ngx-bootstrap/locale";
defineLocale("nb", nbLocale); //only setting up Norwegian bokmaal (nb) in this sample
export class AppModule {
 constructor(private bsLocaleService: BsLocaleService) {
    this.bsLocaleService.use('nb');
    }
}

Now all our ngx-bootstrap datepickers will have the specified locale Norwegian. You can of course switch to other locales, remember to type in the string literals for the locals as lowercase.

Upvotes: 6

IlyaSurmay
IlyaSurmay

Reputation: 2333

Looks like you defined locale but haven't actually set it. Inject BsLocaleService from ngx-bootstrap/datepicker in your component and call its use('fr') method. Check the example here - https://valor-software.com/ngx-bootstrap/#/datepicker#locales (go to component tab and take a look at the code)

Upvotes: 3

Related Questions