Time picker not opening after setCulture('zh-Hant') in ejs-datetimepicker

5 Replies
3 Participants

Created by
TE techlandandyzhang

Platform
Angular - EJ 2

Platform
Angular - EJ 2

Control
DateTimePicker

Created On
Dec 22, 2025 03:48 AM UTC

Last Activity On
Dec 30, 2025 03:57 AM UTC

Want to subscribe?
SIGN IN

Dear Syncfusion Support Team,

I am using ejs-datetimepicker in my project and encountered the following issue when setting the culture to Traditional Chinese:

After applying the 'zh-Hant' culture, the time part of the datetimepicker becomes completely unresponsive: clicking the time portion (hours, minutes, AM/PM) does not open the time selection popup anymore.

https://stackblitz.com/edit/angular-zrizqviq?file=src%2Fapp.component.ts

Image_3455_1766375263678

5 Replies

MR Mallesh Ravi Chandran Syncfusion Team December 23, 2025 03:09 AM UTC

Based on validation with the reported sample, the reported scnerio occurs when the CLDR data loaded for the active culture is incomplete or mismatched. This leads to the reported scenario where the time portion of the DateTimePicker becomes unresponsive.

Ensure that the correct CLDR data for the selected culture is loaded. You can refer to the official documentation for globalization here:
Syncfusion Angular DateTimePicker Globalization

To install the CLDR-Data package (which includes all required JSON files), use the following command:

npm install cldr-data --save

After installation, load the respective culture-specific files (such as ca-gregorian.json, numbers.json, timeZoneNames.json, and supplemental files like numberingSystems.json and weekdata.json) before setting the culture.

Sample : Bf5zcpcg (duplicated) - StackBlitz

The modified sample demonstrates the correct approach for loading CLDR data and resolving the reported scenario. Please review the sample for guidance.

TE techlandandyzhang December 24, 2025 04:36 AM UTC

Currently using: @syncfusion/ej2-cldr-data. If I don't want to directly reference cldr-data, but still keep using ej2-cldr-data, is it possible to resolve the issue with the date-time controls in Traditional Chinese?

import * as numberingSystems from '@syncfusion/ej2-cldr-data/supplemental/numberingSystems.json';

import * as zhHansGregorian from '@syncfusion/ej2-cldr-data/main/zh-Hans/ca-gregorian.json';

import * as zhHansNumbers from '@syncfusion/ej2-cldr-data/main/zh-Hans/numbers.json';

import * as zhHansTimeZoneNames from '@syncfusion/ej2-cldr-data/main/zh-Hans/timeZoneNames.json';

import * as zhHantGregorian from '@syncfusion/ej2-cldr-data/main/zh-Hant/ca-gregorian.json';

import * as zhHantNumbers from '@syncfusion/ej2-cldr-data/main/zh-Hant/numbers.json';

import * as zhHantTimeZoneNames from '@syncfusion/ej2-cldr-data/main/zh-Hant/timeZoneNames.json';

import * as jaGregorian from '@syncfusion/ej2-cldr-data/main/ja/ca-gregorian.json';

import * as jaNumbers from '@syncfusion/ej2-cldr-data/main/ja/numbers.json';

import * as jaTimeZoneNames from '@syncfusion/ej2-cldr-data/main/ja/timeZoneNames.json';

PK Priyanka Karthikeyan Syncfusion Team December 24, 2025 02:10 PM UTC

Hi techlandandyzhang,

Yes, it is possible to resolve issues with date-time controls in Traditional Chinese by using only the @syncfusion/ej2-cldr-data package without directly referencing the cldr-data package. The @syncfusion/ej2-cldr-data package contains the necessary CLDR JSON data for various cultures, including Traditional Chinese.
To implement Traditional Chinese localization with your DateTimePicker control, you can follow these steps:

First, import the required CLDR data from the @syncfusion/ej2-cldr-data package:

import { loadCldr, L10n } from '@syncfusion/ej2-base';
import zhHantNumbersData from "@syncfusion/ej2-cldr-data/main/zh-Hant/numbers.json";
import zhHantCalendarData from "@syncfusion/ej2-cldr-data/main/zh-Hant/ca-gregorian.json";
import zhHantTimeZoneData from "@syncfusion/ej2-cldr-data/main/zh-Hant/timeZoneNames.json";
import supplementalData from "@syncfusion/ej2-cldr-data/supplemental/numberingSystems.json";
import weekData from "@syncfusion/ej2-cldr-data/supplemental/weekdata.json"; // For correct first day of week

Load the CLDR data using the loadCldr method:

loadCldr(
    zhHantNumbersData,
    zhHantCalendarData,
    zhHantTimeZoneData,
    supplementalData,
    weekData
);

Add the localized text using the L10n.load method:

L10n.load({
    'zh-Hant': {
        'datetimepicker': {
            placeholder: '選擇日期和時間',
            today: '今天'
        }
    }
});

Set the locale in your DateTimePicker:

let dateTimePicker = new DateTimePicker({
locale: 'zh-Hant'
});
dateTimePicker.appendTo('#element');

This approach allows you to use Traditional Chinese localization without directly referencing the cldr-data package, which is particularly useful for optimizing your bundle size since the @syncfusion/ej2-cldr-data package includes only the necessary CLDR data for Syncfusion components.

For specific date and time formats in Traditional Chinese, the DateTimePicker will automatically use the appropriate format based on the culture once the CLDR data is properly loaded.

Regards,

Priyanka K

TE techlandandyzhang December 26, 2025 07:50 AM UTC

Dear Syncfusion Support Team,

I am encountering a bug in the Essential JS 2 controls when using the Traditional Chinese (zh-Hant) culture.

Specifically, when I set the culture to "zh-Hant" using setCulture("zh-Hant"), the popup calendar (or list interface) for the DatePicker/DateTimePicker/TimePicker controls does not open. The input field is clickable, but no popup appears.

This issue occurs only with "zh-Hant". The other cultures I tested work fine:

"zh-Hans" (Simplified Chinese)

"en" (English)

"ja" (Japanese)

Here is the relevant code for loading the CLDR data and setting the culture:

JavaScriptimport * as numberingSystems from '@syncfusion/ej2-cldr-data/supplemental/numberingSystems.json';