Hi Harleen,
We have prepared sample based on the shared information. Please find the code snippet and sample for your reference.
loadCldr( require('./cldr-data/numbers.json'), require('./cldr-data/ca-gregorian.json'), require('./cldr-data/numberingSystems.json'), require('./cldr-data/timeZoneNames.json') ); let datepicker: DatePicker = new DatePicker({ locale: 'de', }); datepicker.appendTo('#datepicker'); L10n.load({ de: { datepicker: { today: 'heute', placeholder: 'Wählen Sie einen Bereich aus', }, }, }); |
Sample: https://stackblitz.com/edit/g4ucuy?file=index.ts,cldr-data%2Fca-gregorian.json,cldr-data%2FnumberingSystems.json,cldr-data%2Fnumbers.json,cldr-data%2FtimeZoneNames.json,index.html
Regards,
Priyanka K
I have integrated ej2 datepicker in javascript. I had to translate the months provided in its header to German language. I even set the locale to "de".
Below is my code:
let userLang = navigator.language;
let datePickerFormat;
let dateLocale;
let dateWaterMarkText;
let dateButtonText;
if (userLang === "de") {
datePickerFormat = "dd.MM.yyyy";
dateLocale = "de";
dateWaterMarkText = alias;
dateButtonText = "Heute";
} else {
datePickerFormat = "dd-MM-yyyy";
dateLocale = "en-US";
dateWaterMarkText = alias;
dateButtonText = "Today";
}
// Select the element using document.querySelector or any suitable selector method
let startDatePicker = document.querySelector(`#startdatepick${columnName}`);
// Create an instance of the DatePicker control
let datePicker = new ej.calendars.DatePicker({
format: datePickerFormat,
// readonly: true, // Equivalent to allowEdit: false
value: null, // Set the initial value if required
change: app.detailSearch.getDatepickerVal, // Equivalent to select: "app.detailSearch.getDatepickerVal"
locale: dateLocale,
placeholder: dateWaterMarkText, // Equivalent to watermarkText
// buttonText: dateButtonText
});
// Render the DatePicker control within the selected element
datePicker.appendTo(startDatePicker);
And also loaded the L10n module.
ej.base.L10n.load({
'de-DE': {
'datepicker': {
monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
shortMonthNames: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
}
}
});