Datepicker ngx-bootstrap

Question

I am trying to apply locale on old datepicker

https://valor-software.com/ngx-bootstrap/#/datepicker

I have tried evrything and i dont know where to look further, i can use the new one, but i have big solution that i have to stay on old datepicker

Here is what i have

my.module.ts

import { CommonModule } from '@angular/common';
import { DatepickerModule } from 'ngx-bootstrap/datepicker';

@NgModule({
    imports: [
        DatepickerModule.forRoot() 
    ],
    declarations: [

    ],
    providers: [

    ],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ]
})
export class MyModule {
}

my.component.ts

import { defineLocale } from 'ngx-bootstrap/bs-moment';
import { de } from 'ngx-bootstrap/locale';
defineLocale('de', de);


@Component({
    templateUrl: './my.component.html',
    styleUrls: ['./my.component.scss']
})

export class MyComponent implements OnInit {}

my.component.html

  <datepicker formControlName="effectiveDate" [showWeeks]="false" [locale]="de">

Can't bind to 'locale' since it isn't a known property of 'datepicker'. :(

For the legacy version of this datepicker, I do not see locale listed as an available input. — Tyler Jennings
Yes, but how to add locale for legacy version, that is my question? — Miomir Dancevic
You can't just simply add inputs to a third-party library without forking it and modifying the source. Why not use the updated version? It contains a locale. — Tyler Jennings
It looks like both the legacy version and new version are in the exact same library, just change which module you import. One is DatepickerModule, the new one is BsDatepickerModule. — Tyler Jennings

Tyler Jennings Tyler Jennings · Accepted Answer · 2018-01-17T13:49:09

The legacy version of this datepicker does not contain a locale input. Documentation states This is a legacy version of datepicker without support of daterangepicker, locales, themes, etc. The newer version does have a locale, but it cannot be modified as an input property. Instead you use the BsLocaleService to change the locale. It should look something like this:

my.module.ts

import { CommonModule } from '@angular/common';
import { BsDatepickerModule, BsLocaleService  } from 'ngx-bootstrap/datepicker';
import { de } from 'ngx-bootstrap/locale';
defineLocale('de', de);

@NgModule({
    imports: [
        BsDatepickerModule.forRoot() 
    ],
    declarations: [

    ],
    providers: [
        BsLocaleService 
    ],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ]
})
export class MyModule {
}

my.component.ts

import { BsDatepickerConfig, BsLocaleService } from 'ngx-bootstrap/datepicker';
import { listLocales } from 'ngx-bootstrap/bs-moment';

@Component({
    templateUrl: './my.component.html',
    styleUrls: ['./my.component.scss']
})

export class MyComponent implements OnInit {
   locale = 'de';

   constructor(private _localeService: BsLocaleService) {}

   ngOnInit(){
      this._localeService.use(this.locale);
   }

}

my.component.html

<input placeholder="Datepicker" type="text" formControlName="effectiveDate" class="form-control" bsDatepicker #dp="bsDatepicker">

Datepicker ngx-bootstrap

1 Answers