Ngx-bootstrap: DatePicker: Usage of locales

[leomayer]

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

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

3) 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');
}

[valorkin]

@keki91 is right, thanks for help :)

[lreb]

thanks!!!

[FrancescoBorzi]

@valorkin this looks to be an issue again with Angular 7, please check https://stackoverflow.com/questions/53087057/production-angular-7-app-produces-runtime-errors-in-console-related-to-ngx-boots

[FrancescoBorzi]

@Domainv

[Domainv]

just set "buildOptimizer": false

[FrancescoBorzi]

@Domainv the one you pointed could only be a temporary solution, but the issue should stay open until it properly get fixed again.

[ayyash]

I don't understand, this is marked as closed but the solution is not really a solution, downgrading to 3.0.1 makes it work, which means what? how do we know if the issue belongs to angular or not? is there an open issue on angular regarding this?

[Domainv]

@ayyash If you about the issue https://stackoverflow.com/questions/53087057/production-angular-7-app-produces-runtime-errors-in-console-related-to-ngx-boots

The issue fixed but not released yet, before release workaround to solve the problem is to set buildOptimizer to off or downgrading to 3.0.1

[Vimallakzz]

In order to acheive localisation in ngx date picker, need to import all possible locales of ngx-datepicker by import locales in defineLocale([localecode], [locale-object])

import * as locales from 'ngx-bootstrap/locale';
import { defineLocale } from 'ngx-bootstrap/chronos';

function defineLocales() {
  for (const locale in locales) {
      defineLocale(locales[locale].abbr, locales[locale]);
  }
}
defineLocales();

[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: