Localizing labels and messages is not working

[Lempkin]

Hi and thx for the library update =)

Here my code :

import { OwlDateTimeModule, OwlMomentDateTimeModule, OWL_DATE_TIME_FORMATS, OwlDateTimeIntl } from '@danielmoncada/angular-datetime-picker';
...
export class DefaultIntl extends OwlDateTimeIntl {
  upSecondLabel = 'Add a second';
  downSecondLabel = 'Minus a second';
  upMinuteLabel = 'Add a minute';
  downMinuteLabel = 'Minus a minute';
  upHourLabel = 'Add a hour';
  downHourLabel = 'Minus a hour';
  prevMonthLabel = 'Previous month';
  nextMonthLabel = 'Next month';
  prevYearLabel = 'Previous year';
  nextYearLabel = 'Next year';
  prevMultiYearLabel = 'Previous 21 years';
  nextMultiYearLabel = 'Next 21 years';
  switchToMonthViewLabel = 'Change to month view';
  switchToMultiYearViewLabel = 'Choose month and year';
  cancelBtnLabel = 'Annuler';
  setBtnLabel = 'Valider';
  rangeFromLabel = 'From';
  rangeToLabel = 'To';
  hour12AMLabel = 'AM';
  hour12PMLabel = 'PM';
}
...
  providers: [
        { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
        { provide: LOCALE_ID, useValue: 'fr' },
        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
        { provide: MAT_DATE_LOCALE, useValue: 'fr-FR' },
        { provide: OWL_DATE_TIME_FORMATS, useValue: DATETIME_FORMATS },
        { provide: OwlDateTimeIntl, useClass: DefaultIntl }
      ]

I've customized setBtnLabel and cancelBtnLabel, but labels are not replaced and I still see "Cancel" and "Set"

I use @danielmoncada/angular-datetime-picker@9.4.2, @angular/core@~9.1.7 and build with Ivy.

I've tried in the demo stackblitz and this is working but those demo use an old version of the lib. I tried to make my own stackblitz with updated versions but it seems it doesn't work with your lib : https://stackblitz.com/edit/angular-ivy-h2trhq?file=src%2Fapp%2Fapp.component.html

What should I do? Thx

[danielmoncada]

@Lempkin are you registering the locale through Angular as well? This seems to work:

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, LOCALE_ID } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { OwlDateTimeModule, OwlNativeDateTimeModule } from '../../projects/picker/src/public_api';
import { AppComponent } from './app.component';
import { OWL_DATE_TIME_LOCALE } from '../../projects/picker/src/public_api';
import localeFr from '@angular/common/locales/fr';
import { registerLocaleData } from '@angular/common';
registerLocaleData(localeFr);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, BrowserAnimationsModule, FormsModule,
    OwlDateTimeModule, OwlNativeDateTimeModule
  ],
  providers: [
    {provide: LOCALE_ID, useValue: 'fr' },
   { provide: OWL_DATE_TIME_LOCALE, useValue: 'fr-FR' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

[danielmoncada]

@Lempkin still an issue? if not, going to close..

[Lempkin]

Hi, yes I do register locale as :

registerLocaleData(localeFr, 'fr');

I 'm able to customize labels with following code :

export const objDefaultIntl = new OwlDateTimeIntl();
objDefaultIntl.setBtnLabel = 'Valider';
objDefaultIntl.cancelBtnLabel = 'Annuler';

Which is not exactly what's recommended in doc

[barden42]

Hi,

I have the same issue, impossible to translate buttons "cancel" and "set". I tried both solutions, this one of the documentation and the code posted by @Lempkin

What is the solution ?

[StalinMazaEpn]

I used this code to set language "es" and it worked, I hope it helps you

datetime-picker.config.ts

import { OwlDateTimeIntl } from '@danielmoncada/angular-datetime-picker';
import { Injectable } from '@angular/core';

@Injectable()
export class DefaultIntl extends OwlDateTimeIntl {
    /** A label for the up second button (used by screen readers).  */
    upSecondLabel = 'Añadir un segundo';

    /** A label for the down second button (used by screen readers).  */
    downSecondLabel = 'Restar un segundo';

    /** A label for the up minute button (used by screen readers).  */
    upMinuteLabel = 'Añadir un minuto';

    /** A label for the down minute button (used by screen readers).  */
    downMinuteLabel = 'Menos de un minuto';

    /** A label for the up hour button (used by screen readers).  */
    upHourLabel = 'Añadir una hora';

    /** A label for the down hour button (used by screen readers).  */
    downHourLabel= 'Menos de una hora';

    /** A label for the previous month button (used by screen readers). */
    prevMonthLabel= 'Mes pasado';

    /** A label for the next month button (used by screen readers). */
    nextMonthLabel= 'Mes siguiente';

    /** A label for the previous year button (used by screen readers). */
    prevYearLabel = 'Año pasado';
    /** A label for the next year button (used by screen readers). */
    nextYearLabel = 'Año siguiente';

    /** A label for the previous multi-year button (used by screen readers). */
    prevMultiYearLabel = 'Hace 21 años';

    /** A label for the next multi-year button (used by screen readers). */
    nextMultiYearLabel = 'En los proximos 21 años';

    /** A label for the 'switch to month view' button (used by screen readers). */
    switchToMonthViewLabel = 'Cambiar a la vista de mes';

    /** A label for the 'switch to year view' button (used by screen readers). */
    switchToMultiYearViewLabel = 'Escoger mes y año';

    /** A label for the cancel button */
    cancelBtnLabel = 'Cancelar';

    /** A label for the set button */
    setBtnLabel = 'Guardar';

    /** A label for the range 'from' in picker info */
    rangeFromLabel = 'Desde';

    /** A label for the range 'to' in picker info */
    rangeToLabel = 'Hasta';

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

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

y en el app.module.ts lo importe de la siguiente manera

import { registerLocaleData } from '@angular/common';
import { OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_LOCALE, OwlDateTimeIntl } from '@danielmoncada/angular-datetime-picker';

registerLocaleData(localeEs, 'es');

imports: [
        OwlDateTimeModule,
        OwlNativeDateTimeModule,
],
providers: [
        {
            provide: OwlDateTimeIntl,
            useClass: DefaultIntl
        },
        {
            provide: OWL_DATE_TIME_LOCALE,
            useValue: 'es'
        },
]

[fdc80]

export const objDefaultIntl = new OwlDateTimeIntl(); objDefaultIntl.setBtnLabel = 'Valider'; objDefaultIntl.cancelBtnLabel = 'Annuler';

@Lempkin could you tell me where you put this code and how it worked? Thanks in advance

[marukop]

Hello,

@StalinMazaEpn, I did the exact same way as you did. I still get the "Cancel" and "Set" label in buttons... What is your library version?

Thanks,

[dsnoeck]

Any chance to do it at runtime ?

[JSCharlot]

Here is what I did using translate service from ngx-translate :

date-time-intl.service

import {Injectable} from '@angular/core';
import {OwlDateTimeIntl} from '@danielmoncada/angular-datetime-picker';
import { TranslateService } from '@ngx-translate/core';
import { Inject } from '@angular/core';

@Injectable()
export class DefaultIntl extends OwlDateTimeIntl {

  constructor(@Inject(TranslateService) private translate) {
    super();

    this.cancelBtnLabel = this.translate.instant('datetime-picker.cancelBtnLabel');
    this.setBtnLabel = this.translate.instant('datetime-picker.setBtnLabel');

    this.translate.onLangChange.subscribe(() => {
      this.cancelBtnLabel = this.translate.instant('datetime-picker.cancelBtnLabel');
      this.setBtnLabel = this.translate.instant('datetime-picker.setBtnLabel');
    });
  }
}

app.module.ts

{
      provide: OwlDateTimeIntl,
      useClass: DefaultIntl
    },
    {
      provide: OWL_DATE_TIME_LOCALE,
      useValue: 'fr'
    }

Code taken and adapted from here : https://stackoverflow.com/questions/52115558/trying-to-translate-ngpickdatetime-labels-when-user-change-page-lang/56052098