ejs-datetimepicker and ejs-timepicker’s times dropdown list globalization 12 and 24-hour format

You may come across a problem during your angular project development, where you need to change an ejs-datetimepicker time format to 12 hours to 24 hours.

Maybe you want to display the time format according to your country’s language or maybe you want a right to left (RTL) layout for languages like Arabic, Urdu, Hebrew, etc instead of AM and PM. Well, you can achieve this by globalization in the angular time picker component.

Let’s start building an application to globalize ejs-timepicker

First of all, you need to load cultural-specific CLDR JSON data and for that, you need to install the CLDR npm package.

npm install cldr-data

Also if you do not have eis-datetimepicker installed then you can follow these steps


So after installing cldr-data package now you need to import loadCldr and add some files.

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

declare var require: any;






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



  selector: 'app-root',

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

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


export class AppComponent {

  title = 'globalization-ejs';


Inside the app.component.html file you can add locale to different values and each value gives different output.

<ejs-timepicker locale='en-DE'  [value]='dateValue'></ejs-timepicker>

In this case, ejs-datetimepicker will give output in MM/dd/yyyy HH: mm format

there are multiple locale codes that you can find inside your node_modules/cldr-data/availableLocales.json file.

all locale codes will give a different output of date and time format.

for RTL you can use


<ejs-timepicker locale='en-DE' enableRtl='true' [value]='dateValue'></ejs-timepicker>

you can also assign these locales and enableRtl values using variables, for that you just need to create variables inside your .ts file and assign these variable values.

<ejs-timepicker [locale]='localevalue' [enableRtl]='isRtl' [value]='dateValue'></ejs-timepicker>

In this case localvalue=’en-De’ and isRtl=’true’

Output for ejs-datetimepicker will look like this.

Thank you for reading please share with your friends if helpful.

Related Posts

angular change detection techniques

Understanding Angular Change Detection for Beginners | Angular 17 Change Detection Methods

Understanding how the Angular change detection technique helps in the process of building dynamic and responsive web applications. In this article, we’ll explore some essential concepts of…

TypeScript Strategies for Angular, Explaining Best Practices and Techniques

Angular has fully embraced TypeScript as its primary development language, a decision that has evolved into a widely accepted standard practice. TypeScript introduces robust features for static…

Unlocking the Future of Web Development: A Deep Dive into Angular 17 Features

Angular 17, the powerhouse in the realm of JavaScript frameworks, celebrated its 13th anniversary recently. From its inception with AngularJS, the framework has continuously evolved to meet…


How to use ngx-spinner in Angular to create a loading spinner for smoother user interactions

In this article, we will create a loading spinner component with ngx-spinner in angular application. ngx-spinner in angular provides a loading spinner component that we can use…


Master AngularFire2 and Angular by building a CRUD operation app

In this article, we are creating a CRUD application with angularFire2 and angular, This module basically provides direct access to the Firebase database, and by using angular…


Master Angular NgRx by creating a To-Do Application

In this article we are building a todo application using Angular NgRx, NgRx is used for state management in angular applications. Let’s start by creating a new…

This Post Has One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *