Angular Owl Date Time Picker Labels and Buttons not localized

user_5155835 0
Viewed 3970

In the Owl Date Time Picker, the From and To labels, as well as Set and Cancel buttons are not localized. My code for specifying the locale is:

constructor(
  private dateTimeAdapter: DateTimeAdapter<any>
) {
    dateTimeAdapter.setLocale(localStorage.getItem('localeId'));
}

Tried with de, fr, zh

enter image description here

"ng-pick-datetime": "^7.0.0"

What could be the issue?

Edit:

To test, I tried:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SampleTableComponent } from './sample-table/sample-table.component';
import { MaterialModule } from './material.module';
import { MatFormComponent } from './mat-form/mat-form.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { OwlDateTimeModule, OwlNativeDateTimeModule, OwlDateTimeIntl } from 'ng-pick-datetime';

export class DefaultIntl extends OwlDateTimeIntl {
  cancelBtnLabel: 'C';
  setBtnLabel: 'S';
  rangeFromLabel: 'F';
  rangeToLabel: 'T';
}

@NgModule({
  declarations: [
    AppComponent,
    SampleTableComponent,
    MatFormComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule,
    OwlDateTimeModule,
    OwlNativeDateTimeModule,
  ],
  providers: [{provide: OwlDateTimeIntl, useClass: DefaultIntl}],
  bootstrap: [AppComponent]
})
export class AppModule { }

But I'm still seeing From, To, Set, Cancel

angular6 angular typescript javascript
2 Answers

Localization for different languages and formats is defined by OWL_DATE_TIME_LOCALE and OWL_DATE_TIME_FORMATS. Here's the official doc.

Setting the locale:

By default, the OWL_DATE_TIME_LOCALE injection token will use the existing LOCALE_ID locale code from @angular/core. If you want to override it, you can provide a new value for the OWL_DATE_TIME_LOCALE token:

import { NgModule } from '@angular/core';
import { OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';

@NgModule({
  providers: [
    // use french locale
    {provide: OWL_DATE_TIME_LOCALE, useValue: 'fr'},
  ],
})
export class AppExampleModule {
}

It's also possible to set the locale at runtime using the setLocale() method of the DateTimeAdapter.

import { Component } from '@angular/core';
import { DateTimeAdapter } from 'ng-pick-datetime';

@Component({
  selector: 'app-example',
  templateUrl: 'app-example.html',
})
export class AppExample {
    constructor(dateTimeAdapter: DateTimeAdapter<any>) {
        dateAdapter.setLocale('ja-JP'); // change locale to Japanese
    }
}

In these examples french and japaneese are used - in your case it would be zh

In your case the labels and messages seem to be not localized - try the following and adjust the strings to your needs (I believe Chineese but please correct me if I'm wrong): 

import { NgModule } from '@angular/core';
import { OwlDateTimeModule, OwlNativeDateTimeModule, OwlDateTimeIntl} from 'ng-pick-datetime';

// here is the default text string - just adjust the strings to reflect your preferred language
export class DefaultIntl extends OwlDateTimeIntl = {
    /** A label for the up second button (used by screen readers).  */
    upSecondLabel= 'Add a second',

    /** A label for the down second button (used by screen readers).  */
    downSecondLabel= 'Minus a second',

    /** A label for the up minute button (used by screen readers).  */
    upMinuteLabel= 'Add a minute',

    /** A label for the down minute button (used by screen readers).  */
    downMinuteLabel= 'Minus a minute',

    /** A label for the up hour button (used by screen readers).  */
    upHourLabel= 'Add a hour',

    /** A label for the down hour button (used by screen readers).  */
    downHourLabel= 'Minus a hour',

    /** A label for the previous month button (used by screen readers). */
    prevMonthLabel= 'Previous month',

    /** A label for the next month button (used by screen readers). */
    nextMonthLabel= 'Next month',

    /** A label for the previous year button (used by screen readers). */
    prevYearLabel= 'Previous year',

    /** A label for the next year button (used by screen readers). */
    nextYearLabel= 'Next year',

    /** A label for the previous multi-year button (used by screen readers). */
    prevMultiYearLabel= 'Previous 21 years',

    /** A label for the next multi-year button (used by screen readers). */
    nextMultiYearLabel= 'Next 21 years',

    /** A label for the 'switch to month view' button (used by screen readers). */
    switchToMonthViewLabel= 'Change to month view',

    /** A label for the 'switch to year view' button (used by screen readers). */
    switchToMultiYearViewLabel= 'Choose month and year',

    /** A label for the cancel button */
    cancelBtnLabel= 'Cancel',

    /** A label for the set button */
    setBtnLabel= 'Set',

    /** A label for the range 'from' in picker info */
    rangeFromLabel= 'From',

    /** A label for the range 'to' in picker info */
    rangeToLabel= 'To',

    /** A label for the hour12 button (AM) */
    hour12AMLabel= 'AM',

    /** A label for the hour12 button (PM) */
    hour12PMLabel= 'PM',
};

@NgModule({
    imports: [OwlDateTimeModule, OwlNativeDateTimeModule],
    providers: [
        {provide: OwlDateTimeIntl, useClass: DefaultIntl},
    ],
})
export class AppExampleModule {
}

Source: Official-docs

user_97935320 
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';


 import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
 import { OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, FormsModule, OwlDateTimeModule, OwlNativeDateTimeModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  providers: [
    // use french locale
    {provide: OWL_DATE_TIME_LOCALE, useValue: 'fr'},
  ]`enter code here`
})
export class AppModule { }

    enter code here
user_129378370
Related