DatePicker: Usage of locales

Bug description or feature request:

After the update to 2.0.3 (and Angular 5.2) I have some problems with the locale in the datepicker component. I see the sample code but cannot figure out what is the appropriate syntax/approach. I have:

bsConfig: Partial<BsDatepickerConfig> = new BsDatepickerConfig();
..
constructor(private bsLocaleService: BsLocaleService) {
...
}
  ngOnInit() {
    const tmp = listLocales();
    this.bsConfig.containerClass = 'theme-dark-blue';
    //this.bsConfig.dateInputFormat = 'YYYY-MM-DD';
    //    this.bsLocaleService.use('de');
    const tmp = defineLocale('localeKey', deLocale);
    defineLocale('de', deLocale); 
    //    //    this.bsLocale.use('de');
    this.dateFormat = tmp.formatLongDate('L');

The above code raises the exception:

locales.js:84 Khronos locale error: please load locale “localekey” before using it

1. When I inspect tmp I just see en nothing else ==> how to initialize it properly?

2. I would have expected to change the dateInputFormat - but the changes are not applied 😕 How to make it properly?

Sorry, but I couldn’t figure it out by the given samples:-/

Bootstrap4, ngx-bootstrap 2.0.3 and Angular 5.2

[Keki91]

We’ve just had this same problem and came up with this fix (albeit for enGb).

Our former code was working fine with enGb - it seems to break with Angular 5 and/or 2.0.3.

app.module.ts

import { defineLocale } from 'ngx-bootstrap/chronos';

import { enGbLocale } from 'ngx-bootstrap/locale';

// The string MUST be lower case - even though the examples give it as enGb
defineLocale('engb', enGbLocale);

calendar.component.ts

import { BsLocaleService } from 'ngx-bootstrap/datepicker';
constructor(private _localeService: BsLocaleService) {
  this._localeService.use('engb');
}

[eneajaho]

So I wanted the language to be in italian and I changed the language with this code:

I imported:

import { BsLocaleService, defineLocale, itLocale } from 'ngx-bootstrap';

Code in example.component.ts

  // set language of datepicker
  setDatepickerLanguage() {
    defineLocale('it', itLocale);
    this.localeService.use('it');
  }

and called the function on the constructor() and it worked.

Screenshot: