How can I correctly translate the datepicker component?

[Jan]

In the component I have configured everything related to culture and language in this way:

import {  L10n, setCulture, loadCldr } from '@syncfusion/ej2-base';
import * as esCurrencies from 'cldr-data/main/es/currencies.json';
import * as esTimeZoneNames from 'cldr-data/main/es/timeZoneNames.json';
import * as esNumbers from 'cldr-data/main/es/numbers.json';
import * as esCaGregorian from 'cldr-data/main/es/ca-gregorian.json';
import * as supplementalCurrencyData from 'cldr-data/supplemental/currencyData.json';
import * as supplementalNumberingSystems from 'cldr-data/supplemental/numberingSystems.json';

L10n.load({
  es: {
    datepicker: {
      placeholder: 'Seleccionar fecha',
      today: 'Hoy',
  }
  }
});

loadCldr(
  esCurrencies,
  esTimeZoneNames,
  esNumbers,
  esCaGregorian,
  supplementalCurrencyData,
  supplementalNumberingSystems
);

setCulture('es')

In the template I have configured the locale to is:

<ejs-datepicker locale='es'></ejs-datepicker>

However, the translation of the ejs-datepicker component is not reflected, the months, days, among others, continue to appear in English.

[Yohapuja Selvakumaran]

Hi Jan,

We have validated your requirement and have made the necessary changes to our sample. However, please note that the "locale" property has been deprecated. To address this change, we recommend loading the locale json file into your application. This will allow you to configure the locale settings and ensure the proper functioning of your application. Please find the code snippet below and attached sample for further reference.

Code Snippet

import { Component } from '@angular/core';

import { loadCldr, setCulture } from '@syncfusion/ej2-base';

declare var require: any;

loadCldr(

  require("cldr-data/main/es/numbers.json"),

  require("cldr-data/main/es/ca-gregorian.json"),

  require("cldr-data/supplemental/numberingSystems.json"),

  require("cldr-data/main/es/timeZoneNames.json"),

  require('cldr-data/supplemental/weekdata.json') // To load the culture based first day of week

);

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  value: Date;

ngOnInit(): void {

    setCulture('es');

  }

  constructor() {

    this.value = new Date('1/1/2020');

  }

}

 

Regards,

Yohapuja S

Attachment: esculture_ee751bf9.zip