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

https://ej2.syncfusion.com/angular/documentation/datetimepicker/getting-started/

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;

loadCldr(

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

require('cldr-data/main/de/ca-gregorian.json'),

require('cldr-data/main/de/numbers.json'),


require('cldr-data/main/de/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 {

  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

enableRtl=’true’ 

<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.