ejs-datetimepicker and ejs-timepicker’s times dropdown list globalization 12 and 24 hours 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 time format according to your country’s language or maybe you want right to left (RTL) layout for language 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 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 outputs 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 icon

How to create Draggable Grid Blocks using angular-gridster2

To create Draggable Grid Blocks using angular-gridster2 first you need to Install the angular-gridster2 library by running npm install angular-gridster2 in your project’s root directory. You also…

angular vs react-min

What is the difference between Angular & React JS, Which one you should choose?

Angular & React JS both are use for Frontend Development, To make Single page applications or Web Apps. Here is a quick difference between both of them….

angular icon

What is Angular Framework? Why we use Angular and What are the Advantages and Disadvantages?

Hi Everyone, In this blog we will discuss about Angular Framework and this is going to be a brief blog about Angular and its pros and cons….

angular icon

Why toPromise is depricated and Explain other options like firstValueFrom and lastValueFrom methods

toPromise method is a method form Rxjs library, It is used to convert an observable to a promise. The toPromise method subscribe to observable and retrun the…

angular icon

How to use RxJS observables in Angular? How to subscribe services with reactive programming

RxJS is a library for reactive programming, RxJS stands for reactive extension for JavaScript. It helps to handle asynchronous request in a easier way using observables. You…

angular icon

How angular app works? what happen in background when angular application starts.

Let’s understand how an angular application works from core, what happen when it starts. In index.html file there is a <app-root> custom html code, this app-root is…

This Post Has One Comment

Leave a Reply

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