angular 5: ngx-bootstrap timepicker locale

Question

I am using timepicker from ngx-bootstrap like this :

 <timepicker [(ngModel)]="startDateTime" name="startTimes" #startTime="ngModel" required [showMeridian]="true"></timepicker>

Trying to have locale working for 'de' (Deutsche) and 'ja' (Japaneese) based on the logged in user like this:

app.module.ts:

import {TimepickerModule, BsLocaleService} from 'ngx-bootstrap';

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

    ],
    providers: [
        BsLocaleService 
    ]
})

my.component.ts:

import {Component, OnInit, Inject, ViewChild, SimpleChange, SimpleChanges} from '@angular/core';
import {TimepickerModule, BsLocaleService} from 'ngx-bootstrap';
import {listLocales} from 'ngx-bootstrap';
import {deLocale} from 'ngx-bootstrap';
import {jaLocale} from 'ngx-bootstrap';

@Component({
    selector: 'my-component',
    templateUrl: './my-component.html',
    styleUrls: ['./my-component.less']
})
export class MyComponent implements OnInit {
    locale = 'ja'; //hardcoded for testing
    locales = listLocales();
    startDateTime = new Date();

    constructor(private _localeService: BsLocaleService) {
        this._localeService.use(this.locale);
    }

This isn't working for locale, the functionality of timepicker is working fine though. I am pretty new to this and the documentation on the site doesn't have anything about the timepicker locale. I have implemented this by looking at the datepicker locale : https://valor-software.com/ngx-bootstrap/#/datepicker#locales

What am i doing wrong ?

JLouis JLouis · Accepted Answer · 2018-05-14T10:01:11

I think you should add this piece in the module

// imports

import { defineLocale, jaLocale } from 'ngx-bootstrap';

defineLocale('ja', jaLocale);

// @NgModule(...)

angular 5: ngx-bootstrap timepicker locale

1 Answers