Search results

Globalization in React TimePicker component

22 Nov 2022 / 5 minutes to read

Globalization is the combination of internationalization and localization. You can adapt the component to various languages by means of parsing and formatting the date or number internationalization , and also add culture specific customization and translation to the text localization.

By default, TimePicker time format and meridian names are specific to the American English culture. It utilizes the Essential JavaScript 2 Internationalization package to parse and format the date object based on the culture by using the official UNICODE CLDR JSON data. It provides the loadCldr method to load culture specific CLDR JSON data. To go with the different culture other than English, follow the steps below.

  • Install the CLDR-Data package by using the following command (it installs all the CLDR JSON data). To known more about CLDR-Data refer the CLDR-Data link.
Copied to clipboard
npm install cldr-data --save

Once the package is installed, you can find the culture specific JSON data under the location \node_modules\cldr-data.

  • Import the installed CLDR JSON data into the app.ts file.
  • Use the loadCldr method to load the culture specific CLDR JSON data from the installed location to app.ts file.
  • TimePicker displayed Sunday as the first day of week based on default culture (“en-US”). If you want to display the TimePicker with loaded culture’s first day of week, you need to import weekdata.json file from the cldr-data/suppemental as given in the code example.
Copied to clipboard
import { loadCldr } from '@syncfusion/ej2-base';

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

import * as gregorian from 'cldr-data/main/de/ca-gregorian.json';
import * as numbers from 'cldr-data/main/de/numbers.json';
import * as numberingSystems from 'cldr-data/supplemental/numberingSystems.json';

loadCldr(numberingSystems, gregorian, numbers);

if you are facing the error /node_modules/cldr-data/main/de/*.json (1,1): unused expression, expected an assignment or function call when you are adding the json files to render the culture sample, then add the below configuration in your tslint.json file

Copied to clipboard
"linterOptions": {
"exclude": [
  "*.json",
  "**/*.json"
]
  }
  • Before changing to a culture other than English, ensure that locale text for the concerned culture is loaded through load method of L10n class.
Copied to clipboard
//Load the L10n, loadCldr from ej2-base
import { loadCldr, L10n } from '@syncfusion/ej2-base';

//load the locale object to set the localized placeholder value
L10n.load({
'de': {
    'timepicker': { placeholder: 'Wählen Sie Zeit'}
}
});
  • Set the culture by using the locale property. In the following code example, the DateTimePicker is initialized in German culture with corresponding localized text.

The following example demonstrates the TimePicker in German culture.

[Class-component]

Source
Preview
ca-gregorian.jsx
index.jsx
numberingSystems.jsx
numbers.jsx
index.html
index.tsx
Copied to clipboard
{
    "main";
    {
        "de";
        {
            "identity";
            {
                "version";
                {
                    "_number";
                    "$Revision: 12879 $",
                        "_cldrVersion";
                    "30.0.3";
                }
                "language";
                "de";
            }
            "dates";
            {
                "calendars";
                {
                    "gregorian";
                    {
                        "months";
                        {
                            "format";
                            {
                                "abbreviated";
                                {
                                    "1";
                                    "Jan.",
                                        "2";
                                    "Feb.",
                                        "3";
                                    "März",
                                        "4";
                                    "Apr.",
                                        "5";
                                    "Mai",
                                        "6";
                                    "Juni",
                                        "7";
                                    "Juli",
                                        "8";
                                    "Aug.",
                                        "9";
                                    "Sep.",
                                        "10";
                                    "Okt.",
                                        "11";
                                    "Nov.",
                                        "12";
                                    "Dez.";
                                }
                                "narrow";
                                {
                                    "1";
                                    "J",
                                        "2";
                                    "F",
                                        "3";
                                    "M",
                                        "4";
                                    "A",
                                        "5";
                                    "M",
                                        "6";
                                    "J",
                                        "7";
                                    "J",
                                        "8";
                                    "A",
                                        "9";
                                    "S",
                                        "10";
                                    "O",
                                        "11";
                                    "N",
                                        "12";
                                    "D";
                                }
                                "wide";
                                {
                                    "1";
                                    "Januar",
                                        "2";
                                    "Februar",
                                        "3";
                                    "März",
                                        "4";
                                    "April",
                                        "5";
                                    "Mai",
                                        "6";
                                    "Juni",
                                        "7";
                                    "Juli",
                                        "8";
                                    "August",
                                        "9";
                                    "September",
                                        "10";
                                    "Oktober",
                                        "11";
                                    "November",
                                        "12";
                                    "Dezember";
                                }
                            }
                            "stand-alone";
                            {
                                "abbreviated";
                                {
                                    "1";
                                    "Jan",
                                        "2";
                                    "Feb",
                                        "3";
                                    "Mär",
                                        "4";
                                    "Apr",
                                        "5";
                                    "Mai",
                                        "6";
                                    "Jun",
                                        "7";
                                    "Jul",
                                        "8";
                                    "Aug",
                                        "9";
                                    "Sep",
                                        "10";
                                    "Okt",
                                        "11";
                                    "Nov",
                                        "12";
                                    "Dez";
                                }
                                "narrow";
                                {
                                    "1";
                                    "J",
                                        "2";
                                    "F",
                                        "3";
                                    "M",
                                        "4";
                                    "A",
                                        "5";
                                    "M",
                                        "6";
                                    "J",
                                        "7";
                                    "J",
                                        "8";
                                    "A",
                                        "9";
                                    "S",
                                        "10";
                                    "O",
                                        "11";
                                    "N",
                                        "12";
                                    "D";
                                }
                                "wide";
                                {
                                    "1";
                                    "Januar",
                                        "2";
                                    "Februar",
                                        "3";
                                    "März",
                                        "4";
                                    "April",
                                        "5";
                                    "Mai",
                                        "6";
                                    "Juni",
                                        "7";
                                    "Juli",
                                        "8";
                                    "August",
                                        "9";
                                    "September",
                                        "10";
                                    "Oktober",
                                        "11";
                                    "November",
                                        "12";
                                    "Dezember";
                                }
                            }
                        }
                        "days";
                        {
                            "format";
                            {
                                "abbreviated";
                                {
                                    "sun";
                                    "So.",
                                        "mon";
                                    "Mo.",
                                        "tue";
                                    "Di.",
                                        "wed";
                                    "Mi.",
                                        "thu";
                                    "Do.",
                                        "fri";
                                    "Fr.",
                                        "sat";
                                    "Sa.";
                                }
                                "narrow";
                                {
                                    "sun";
                                    "S",
                                        "mon";
                                    "M",
                                        "tue";
                                    "D",
                                        "wed";
                                    "M",
                                        "thu";
                                    "D",
                                        "fri";
                                    "F",
                                        "sat";
                                    "S";
                                }
                                "short";
                                {
                                    "sun";
                                    "So.",
                                        "mon";
                                    "Mo.",
                                        "tue";
                                    "Di.",
                                        "wed";
                                    "Mi.",
                                        "thu";
                                    "Do.",
                                        "fri";
                                    "Fr.",
                                        "sat";
                                    "Sa.";
                                }
                                "wide";
                                {
                                    "sun";
                                    "Sonntag",
                                        "mon";
                                    "Montag",
                                        "tue";
                                    "Dienstag",
                                        "wed";
                                    "Mittwoch",
                                        "thu";
                                    "Donnerstag",
                                        "fri";
                                    "Freitag",
                                        "sat";
                                    "Samstag";
                                }
                            }
                            "stand-alone";
                            {
                                "abbreviated";
                                {
                                    "sun";
                                    "So",
                                        "mon";
                                    "Mo",
                                        "tue";
                                    "Di",
                                        "wed";
                                    "Mi",
                                        "thu";
                                    "Do",
                                        "fri";
                                    "Fr",
                                        "sat";
                                    "Sa";
                                }
                                "narrow";
                                {
                                    "sun";
                                    "S",
                                        "mon";
                                    "M",
                                        "tue";
                                    "D",
                                        "wed";
                                    "M",
                                        "thu";
                                    "D",
                                        "fri";
                                    "F",
                                        "sat";
                                    "S";
                                }
                                "short";
                                {
                                    "sun";
                                    "So.",
                                        "mon";
                                    "Mo.",
                                        "tue";
                                    "Di.",
                                        "wed";
                                    "Mi.",
                                        "thu";
                                    "Do.",
                                        "fri";
                                    "Fr.",
                                        "sat";
                                    "Sa.";
                                }
                                "wide";
                                {
                                    "sun";
                                    "Sonntag",
                                        "mon";
                                    "Montag",
                                        "tue";
                                    "Dienstag",
                                        "wed";
                                    "Mittwoch",
                                        "thu";
                                    "Donnerstag",
                                        "fri";
                                    "Freitag",
                                        "sat";
                                    "Samstag";
                                }
                            }
                        }
                        "quarters";
                        {
                            "format";
                            {
                                "abbreviated";
                                {
                                    "1";
                                    "Q1",
                                        "2";
                                    "Q2",
                                        "3";
                                    "Q3",
                                        "4";
                                    "Q4";
                                }
                                "narrow";
                                {
                                    "1";
                                    "1",
                                        "2";
                                    "2",
                                        "3";
                                    "3",
                                        "4";
                                    "4";
                                }
                                "wide";
                                {
                                    "1";
                                    "1. Quartal",
                                        "2";
                                    "2. Quartal",
                                        "3";
                                    "3. Quartal",
                                        "4";
                                    "4. Quartal";
                                }
                            }
                            "stand-alone";
                            {
                                "abbreviated";
                                {
                                    "1";
                                    "Q1",
                                        "2";
                                    "Q2",
                                        "3";
                                    "Q3",
                                        "4";
                                    "Q4";
                                }
                                "narrow";
                                {
                                    "1";
                                    "1",
                                        "2";
                                    "2",
                                        "3";
                                    "3",
                                        "4";
                                    "4";
                                }
                                "wide";
                                {
                                    "1";
                                    "1. Quartal",
                                        "2";
                                    "2. Quartal",
                                        "3";
                                    "3. Quartal",
                                        "4";
                                    "4. Quartal";
                                }
                            }
                        }
                        "dayPeriods";
                        {
                            "format";
                            {
                                "abbreviated";
                                {
                                    "midnight";
                                    "Mitternacht",
                                        "am";
                                    "vorm.",
                                        "pm";
                                    "nachm.",
                                        "morning1";
                                    "morgens",
                                        "morning2";
                                    "vormittags",
                                        "afternoon1";
                                    "mittags",
                                        "afternoon2";
                                    "nachmittags",
                                        "evening1";
                                    "abends",
                                        "night1";
                                    "nachts";
                                }
                                "narrow";
                                {
                                    "midnight";
                                    "Mitternacht",
                                        "am";
                                    "vm.",
                                        "pm";
                                    "nm.",
                                        "morning1";
                                    "morgens",
                                        "morning2";
                                    "vormittags",
                                        "afternoon1";
                                    "mittags",
                                        "afternoon2";
                                    "nachmittags",
                                        "evening1";
                                    "abends",
                                        "night1";
                                    "nachts";
                                }
                                "wide";
                                {
                                    "midnight";
                                    "Mitternacht",
                                        "am";
                                    "vorm.",
                                        "pm";
                                    "nachm.",
                                        "morning1";
                                    "morgens",
                                        "morning2";
                                    "vormittags",
                                        "afternoon1";
                                    "mittags",
                                        "afternoon2";
                                    "nachmittags",
                                        "evening1";
                                    "abends",
                                        "night1";
                                    "nachts";
                                }
                            }
                            "stand-alone";
                            {
                                "abbreviated";
                                {
                                    "midnight";
                                    "Mitternacht",
                                        "am";
                                    "vorm.",
                                        "pm";
                                    "nachm.",
                                        "morning1";
                                    "Morgen",
                                        "morning2";
                                    "Vormittag",
                                        "afternoon1";
                                    "Mittag",
                                        "afternoon2";
                                    "Nachmittag",
                                        "evening1";
                                    "Abend",
                                        "night1";
                                    "Nacht";
                                }
                                "narrow";
                                {
                                    "midnight";
                                    "Mitternacht",
                                        "am";
                                    "vorm.",
                                        "pm";
                                    "nachm.",
                                        "morning1";
                                    "Morgen",
                                        "morning2";
                                    "Vormittag",
                                        "afternoon1";
                                    "Mittag",
                                        "afternoon2";
                                    "Nachmittag",
                                        "evening1";
                                    "Abend",
                                        "night1";
                                    "Nacht";
                                }
                                "wide";
                                {
                                    "midnight";
                                    "Mitternacht",
                                        "am";
                                    "vorm.",
                                        "pm";
                                    "nachm.",
                                        "morning1";
                                    "Morgen",
                                        "morning2";
                                    "Vormittag",
                                        "afternoon1";
                                    "Mittag",
                                        "afternoon2";
                                    "Nachmittag",
                                        "evening1";
                                    "Abend",
                                        "night1";
                                    "Nacht";
                                }
                            }
                        }
                        "eras";
                        {
                            "eraNames";
                            {
                                "0";
                                "v. Chr.",
                                    "0-alt-variant";
                                "vor unserer Zeitrechnung",
                                    "1";
                                "n. Chr.",
                                    "1-alt-variant";
                                "unserer Zeitrechnung";
                            }
                            "eraAbbr";
                            {
                                "0";
                                "v. Chr.",
                                    "0-alt-variant";
                                "v. u. Z.",
                                    "1";
                                "n. Chr.",
                                    "1-alt-variant";
                                "u. Z.";
                            }
                            "eraNarrow";
                            {
                                "0";
                                "v. Chr.",
                                    "0-alt-variant";
                                "v. u. Z.",
                                    "1";
                                "n. Chr.",
                                    "1-alt-variant";
                                "u. Z.";
                            }
                        }
                        "dateFormats";
                        {
                            "full";
                            "EEEE, d. MMMM y",
                                "long";
                            "d. MMMM y",
                                "medium";
                            "dd.MM.y",
                                "short";
                            "dd.MM.yy";
                        }
                        "timeFormats";
                        {
                            "full";
                            "HH:mm:ss zzzz",
                                "long";
                            "HH:mm:ss z",
                                "medium";
                            "HH:mm:ss",
                                "short";
                            "HH:mm";
                        }
                        "dateTimeFormats";
                        {
                            "full";
                            "{1} 'um' {0}",
                                "long";
                            "{1} 'um' {0}",
                                "medium";
                            "{1}, {0}",
                                "short";
                            "{1}, {0}",
                                "availableFormats";
                            {
                                "d";
                                "d",
                                    "E";
                                "ccc",
                                    "Ed";
                                "E, d.",
                                    "Ehm";
                                "E h:mm a",
                                    "EHm";
                                "E, HH:mm",
                                    "Ehms";
                                "E, h:mm:ss a",
                                    "EHms";
                                "E, HH:mm:ss",
                                    "Gy";
                                "y G",
                                    "GyMMM";
                                "MMM y G",
                                    "GyMMMd";
                                "d. MMM y G",
                                    "GyMMMEd";
                                "E, d. MMM y G",
                                    "h";
                                "h 'Uhr' a",
                                    "H";
                                "HH 'Uhr'",
                                    "hm";
                                "h:mm a",
                                    "Hm";
                                "HH:mm",
                                    "hms";
                                "h:mm:ss a",
                                    "Hms";
                                "HH:mm:ss",
                                    "hmsv";
                                "h:mm:ss a v",
                                    "Hmsv";
                                "HH:mm:ss v",
                                    "hmv";
                                "h:mm a v",
                                    "Hmv";
                                "HH:mm v",
                                    "M";
                                "L",
                                    "Md";
                                "d.M.",
                                    "MEd";
                                "E, d.M.",
                                    "MMd";
                                "d.MM.",
                                    "MMdd";
                                "dd.MM.",
                                    "MMM";
                                "LLL",
                                    "MMMd";
                                "d. MMM",
                                    "MMMEd";
                                "E, d. MMM",
                                    "MMMMd";
                                "d. MMMM",
                                    "MMMMEd";
                                "E, d. MMMM",
                                    "MMMMW";
                                "'Woche' W 'im' MMM",
                                    "MMMMW";
                                "'Woche' W 'im' MMM",
                                    "ms";
                                "mm:ss",
                                    "y";
                                "y",
                                    "yM";
                                "M.y",
                                    "yMd";
                                "d.M.y",
                                    "yMEd";
                                "E, d.M.y",
                                    "yMM";
                                "MM.y",
                                    "yMMdd";
                                "dd.MM.y",
                                    "yMMM";
                                "MMM y",
                                    "yMMMd";
                                "d. MMM y",
                                    "yMMMEd";
                                "E, d. MMM y",
                                    "yMMMM";
                                "MMMM y",
                                    "yQQQ";
                                "QQQ y",
                                    "yQQQQ";
                                "QQQQ y",
                                    "yw";
                                "'Woche' w 'des' 'Jahres' y",
                                    "yw";
                                "'Woche' w 'des' 'Jahres' y";
                            }
                            "appendItems";
                            {
                                "Day";
                                "{0} ({2}: {1})",
                                    "Day-Of-Week";
                                "{0} {1}",
                                    "Era";
                                "{1} {0}",
                                    "Hour";
                                "{0} ({2}: {1})",
                                    "Minute";
                                "{0} ({2}: {1})",
                                    "Month";
                                "{0} ({2}: {1})",
                                    "Quarter";
                                "{0} ({2}: {1})",
                                    "Second";
                                "{0} ({2}: {1})",
                                    "Timezone";
                                "{0} {1}",
                                    "Week";
                                "{0} ({2}: {1})",
                                    "Year";
                                "{1} {0}";
                            }
                            "intervalFormats";
                            {
                                "intervalFormatFallback";
                                "{0} – {1}",
                                    "d";
                                {
                                    "d";
                                    "d.–d.";
                                }
                                "h";
                                {
                                    "a";
                                    "h 'Uhr' a – h 'Uhr' a",
                                        "h";
                                    "h – h 'Uhr' a";
                                }
                                "H";
                                {
                                    "H";
                                    "HH–HH 'Uhr'";
                                }
                                "hm";
                                {
                                    "a";
                                    "h:mm a – h:mm a",
                                        "h";
                                    "h:mm–h:mm a",
                                        "m";
                                    "h:mm–h:mm a";
                                }
                                "Hm";
                                {
                                    "H";
                                    "HH:mm–HH:mm 'Uhr'",
                                        "m";
                                    "HH:mm–HH:mm 'Uhr'";
                                }
                                "hmv";
                                {
                                    "a";
                                    "h:mm a – h:mm a v",
                                        "h";
                                    "h:mm–h:mm a v",
                                        "m";
                                    "h:mm–h:mm a v";
                                }
                                "Hmv";
                                {
                                    "H";
                                    "HH:mm–HH:mm 'Uhr' v",
                                        "m";
                                    "HH:mm–HH:mm 'Uhr' v";
                                }
                                "hv";
                                {
                                    "a";
                                    "h a – h a v",
                                        "h";
                                    "h–h a v";
                                }
                                "Hv";
                                {
                                    "H";
                                    "HH–HH 'Uhr' v";
                                }
                                "M";
                                {
                                    "M";
                                    "M.–M.";
                                }
                                "Md";
                                {
                                    "d";
                                    "dd.MM. – dd.MM.",
                                        "M";
                                    "dd.MM. – dd.MM.";
                                }
                                "MEd";
                                {
                                    "d";
                                    "E, dd.MM. – E, dd.MM.",
                                        "M";
                                    "E, dd.MM. – E, dd.MM.";
                                }
                                "MMM";
                                {
                                    "M";
                                    "MMM–MMM";
                                }
                                "MMMd";
                                {
                                    "d";
                                    "d.–d. MMM",
                                        "M";
                                    "d. MMM – d. MMM";
                                }
                                "MMMEd";
                                {
                                    "d";
                                    "E, d. – E, d. MMM",
                                        "M";
                                    "E, d. MMM – E, d. MMM";
                                }
                                "MMMM";
                                {
                                    "M";
                                    "LLLL–LLLL";
                                }
                                "y";
                                {
                                    "y";
                                    "y–y";
                                }
                                "yM";
                                {
                                    "M";
                                    "MM.y – MM.y",
                                        "y";
                                    "MM.y – MM.y";
                                }
                                "yMd";
                                {
                                    "d";
                                    "dd.MM.y – dd.MM.y",
                                        "M";
                                    "dd.MM.y – dd.MM.y",
                                        "y";
                                    "dd.MM.y – dd.MM.y";
                                }
                                "yMEd";
                                {
                                    "d";
                                    "E, dd.MM.y – E, dd.MM.y",
                                        "M";
                                    "E, dd.MM.y – E, dd.MM.y",
                                        "y";
                                    "E, dd.MM.y – E, dd.MM.y";
                                }
                                "yMMM";
                                {
                                    "M";
                                    "MMM–MMM y",
                                        "y";
                                    "MMM y – MMM y";
                                }
                                "yMMMd";
                                {
                                    "d";
                                    "d.–d. MMM y",
                                        "M";
                                    "d. MMM – d. MMM y",
                                        "y";
                                    "d. MMM y – d. MMM y";
                                }
                                "yMMMEd";
                                {
                                    "d";
                                    "E, d. – E, d. MMM y",
                                        "M";
                                    "E, d. MMM – E, d. MMM y",
                                        "y";
                                    "E, d. MMM y – E, d. MMM y";
                                }
                                "yMMMM";
                                {
                                    "M";
                                    "MMMM–MMMM y",
                                        "y";
                                    "MMMM y – MMMM y";
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
//Load the L10n, loadCldr from ej2-base
import { loadCldr, L10n } from '@syncfusion/ej2-base';
//import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
//import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
// enable ripple effect
enableRipple(true);
//load the CLDR data files.
// Here we have referred local json files for preview purpose
import * as numberingSystems from './numberingSystems.json';
import * as gregorian from './ca-gregorian.json';
import * as numbers from './numbers.json';
loadCldr(numberingSystems, gregorian, numbers);
L10n.load({
    'de': {
        'timepicker': { placeholder: 'Wählen Sie Zeit' }
    }
});
//import the timepickercomponent
class App extends React.Component {
    render() {
        return <TimePickerComponent id="time" locale='de'/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('timer'));
Copied to clipboard
{
    "supplemental";
    {
        "version";
        {
            "_number";
            "$Revision: 12732 $",
                "_unicodeVersion";
            "9.0.0",
                "_cldrVersion";
            "31";
        }
        "numberingSystems";
        {
            "adlm";
            {
                "_digits";
                "𞥐𞥑𞥒𞥓𞥔𞥕𞥖𞥗𞥘𞥙",
                    "_type";
                "numeric";
            }
            "ahom";
            {
                "_digits";
                "𑜰𑜱𑜲𑜳𑜴𑜵𑜶𑜷𑜸𑜹",
                    "_type";
                "numeric";
            }
            "arab";
            {
                "_digits";
                "٠١٢٣٤٥٦٧٨٩",
                    "_type";
                "numeric";
            }
            "arabext";
            {
                "_digits";
                "۰۱۲۳۴۵۶۷۸۹",
                    "_type";
                "numeric";
            }
            "armn";
            {
                "_rules";
                "armenian-upper",
                    "_type";
                "algorithmic";
            }
            "armnlow";
            {
                "_rules";
                "armenian-lower",
                    "_type";
                "algorithmic";
            }
            "bali";
            {
                "_digits";
                "᭐᭑᭒᭓᭔᭕᭖᭗᭘᭙",
                    "_type";
                "numeric";
            }
            "beng";
            {
                "_digits";
                "০১২৩৪৫৬৭৮৯",
                    "_type";
                "numeric";
            }
            "bhks";
            {
                "_digits";
                "𑱐𑱑𑱒𑱓𑱔𑱕𑱖𑱗𑱘𑱙",
                    "_type";
                "numeric";
            }
            "brah";
            {
                "_digits";
                "𑁦𑁧𑁨𑁩𑁪𑁫𑁬𑁭𑁮𑁯",
                    "_type";
                "numeric";
            }
            "cakm";
            {
                "_digits";
                "𑄶𑄷𑄸𑄹𑄺𑄻𑄼𑄽𑄾𑄿",
                    "_type";
                "numeric";
            }
            "cham";
            {
                "_digits";
                "꩐꩑꩒꩓꩔꩕꩖꩗꩘꩙",
                    "_type";
                "numeric";
            }
            "cyrl";
            {
                "_rules";
                "cyrillic-lower",
                    "_type";
                "algorithmic";
            }
            "deva";
            {
                "_digits";
                "०१२३४५६७८९",
                    "_type";
                "numeric";
            }
            "ethi";
            {
                "_rules";
                "ethiopic",
                    "_type";
                "algorithmic";
            }
            "fullwide";
            {
                "_digits";
                "0123456789",
                    "_type";
                "numeric";
            }
            "geor";
            {
                "_rules";
                "georgian",
                    "_type";
                "algorithmic";
            }
            "grek";
            {
                "_rules";
                "greek-upper",
                    "_type";
                "algorithmic";
            }
            "greklow";
            {
                "_rules";
                "greek-lower",
                    "_type";
                "algorithmic";
            }
            "gujr";
            {
                "_digits";
                "૦૧૨૩૪૫૬૭૮૯",
                    "_type";
                "numeric";
            }
            "guru";
            {
                "_digits";
                "੦੧੨੩੪੫੬੭੮੯",
                    "_type";
                "numeric";
            }
            "hanidays";
            {
                "_rules";
                "zh/SpelloutRules/spellout-numbering-days",
                    "_type";
                "algorithmic";
            }
            "hanidec";
            {
                "_digits";
                "〇一二三四五六七八九",
                    "_type";
                "numeric";
            }
            "hans";
            {
                "_rules";
                "zh/SpelloutRules/spellout-cardinal",
                    "_type";
                "algorithmic";
            }
            "hansfin";
            {
                "_rules";
                "zh/SpelloutRules/spellout-cardinal-financial",
                    "_type";
                "algorithmic";
            }
            "hant";
            {
                "_rules";
                "zh_Hant/SpelloutRules/spellout-cardinal",
                    "_type";
                "algorithmic";
            }
            "hantfin";
            {
                "_rules";
                "zh_Hant/SpelloutRules/spellout-cardinal-financial",
                    "_type";
                "algorithmic";
            }
            "hebr";
            {
                "_rules";
                "hebrew",
                    "_type";
                "algorithmic";
            }
            "hmng";
            {
                "_digits";
                "𖭐𖭑𖭒𖭓𖭔𖭕𖭖𖭗𖭘𖭙",
                    "_type";
                "numeric";
            }
            "java";
            {
                "_digits";
                "꧐꧑꧒꧓꧔꧕꧖꧗꧘꧙",
                    "_type";
                "numeric";
            }
            "jpan";
            {
                "_rules";
                "ja/SpelloutRules/spellout-cardinal",
                    "_type";
                "algorithmic";
            }
            "jpanfin";
            {
                "_rules";
                "ja/SpelloutRules/spellout-cardinal-financial",
                    "_type";
                "algorithmic";
            }
            "kali";
            {
                "_digits";
                "꤀꤁꤂꤃꤄꤅꤆꤇꤈꤉",
                    "_type";
                "numeric";
            }
            "khmr";
            {
                "_digits";
                "០១២៣៤៥៦៧៨៩",
                    "_type";
                "numeric";
            }
            "knda";
            {
                "_digits";
                "೦೧೨೩೪೫೬೭೮೯",
                    "_type";
                "numeric";
            }
            "lana";
            {
                "_digits";
                "᪀᪁᪂᪃᪄᪅᪆᪇᪈᪉",
                    "_type";
                "numeric";
            }
            "lanatham";
            {
                "_digits";
                "᪐᪑᪒᪓᪔᪕᪖᪗᪘᪙",
                    "_type";
                "numeric";
            }
            "laoo";
            {
                "_digits";
                "໐໑໒໓໔໕໖໗໘໙",
                    "_type";
                "numeric";
            }
            "latn";
            {
                "_digits";
                "0123456789",
                    "_type";
                "numeric";
            }
            "lepc";
            {
                "_digits";
                "᱀᱁᱂᱃᱄᱅᱆᱇᱈᱉",
                    "_type";
                "numeric";
            }
            "limb";
            {
                "_digits";
                "᥆᥇᥈᥉᥊᥋᥌᥍᥎᥏",
                    "_type";
                "numeric";
            }
            "mathbold";
            {
                "_digits";
                "𝟎𝟏𝟐𝟑𝟒𝟓𝟔𝟕𝟖𝟗",
                    "_type";
                "numeric";
            }
            "mathdbl";
            {
                "_digits";
                "𝟘𝟙𝟚𝟛𝟜𝟝𝟞𝟟𝟠𝟡",
                    "_type";
                "numeric";
            }
            "mathmono";
            {
                "_digits";
                "𝟶𝟷𝟸𝟹𝟺𝟻𝟼𝟽𝟾𝟿",
                    "_type";
                "numeric";
            }
            "mathsanb";
            {
                "_digits";
                "𝟬𝟭𝟮𝟯𝟰𝟱𝟲𝟳𝟴𝟵",
                    "_type";
                "numeric";
            }
            "mathsans";
            {
                "_digits";
                "𝟢𝟣𝟤𝟥𝟦𝟧𝟨𝟩𝟪𝟫",
                    "_type";
                "numeric";
            }
            "mlym";
            {
                "_digits";
                "൦൧൨൩൪൫൬൭൮൯",
                    "_type";
                "numeric";
            }
            "modi";
            {
                "_digits";
                "𑙐𑙑𑙒𑙓𑙔𑙕𑙖𑙗𑙘𑙙",
                    "_type";
                "numeric";
            }
            "mong";
            {
                "_digits";
                "᠐᠑᠒᠓᠔᠕᠖᠗᠘᠙",
                    "_type";
                "numeric";
            }
            "mroo";
            {
                "_digits";
                "𖩠𖩡𖩢𖩣𖩤𖩥𖩦𖩧𖩨𖩩",
                    "_type";
                "numeric";
            }
            "mtei";
            {
                "_digits";
                "꯰꯱꯲꯳꯴꯵꯶꯷꯸꯹",
                    "_type";
                "numeric";
            }
            "mymr";
            {
                "_digits";
                "၀၁၂၃၄၅၆၇၈၉",
                    "_type";
                "numeric";
            }
            "mymrshan";
            {
                "_digits";
                "႐႑႒႓႔႕႖႗႘႙",
                    "_type";
                "numeric";
            }
            "mymrtlng";
            {
                "_digits";
                "꧰꧱꧲꧳꧴꧵꧶꧷꧸꧹",
                    "_type";
                "numeric";
            }
            "newa";
            {
                "_digits";
                "𑑐𑑑𑑒𑑓𑑔𑑕𑑖𑑗𑑘𑑙",
                    "_type";
                "numeric";
            }
            "nkoo";
            {
                "_digits";
                "߀߁߂߃߄߅߆߇߈߉",
                    "_type";
                "numeric";
            }
            "olck";
            {
                "_digits";
                "᱐᱑᱒᱓᱔᱕᱖᱗᱘᱙",
                    "_type";
                "numeric";
            }
            "orya";
            {
                "_digits";
                "୦୧୨୩୪୫୬୭୮୯",
                    "_type";
                "numeric";
            }
            "osma";
            {
                "_digits";
                "𐒠𐒡𐒢𐒣𐒤𐒥𐒦𐒧𐒨𐒩",
                    "_type";
                "numeric";
            }
            "roman";
            {
                "_rules";
                "roman-upper",
                    "_type";
                "algorithmic";
            }
            "romanlow";
            {
                "_rules";
                "roman-lower",
                    "_type";
                "algorithmic";
            }
            "saur";
            {
                "_digits";
                "꣐꣑꣒꣓꣔꣕꣖꣗꣘꣙",
                    "_type";
                "numeric";
            }
            "shrd";
            {
                "_digits";
                "𑇐𑇑𑇒𑇓𑇔𑇕𑇖𑇗𑇘𑇙",
                    "_type";
                "numeric";
            }
            "sind";
            {
                "_digits";
                "𑋰𑋱𑋲𑋳𑋴𑋵𑋶𑋷𑋸𑋹",
                    "_type";
                "numeric";
            }
            "sinh";
            {
                "_digits";
                "෦෧෨෩෪෫෬෭෮෯",
                    "_type";
                "numeric";
            }
            "sora";
            {
                "_digits";
                "𑃰𑃱𑃲𑃳𑃴𑃵𑃶𑃷𑃸𑃹",
                    "_type";
                "numeric";
            }
            "sund";
            {
                "_digits";
                "᮰᮱᮲᮳᮴᮵᮶᮷᮸᮹",
                    "_type";
                "numeric";
            }
            "takr";
            {
                "_digits";
                "𑛀𑛁𑛂𑛃𑛄𑛅𑛆𑛇𑛈𑛉",
                    "_type";
                "numeric";
            }
            "talu";
            {
                "_digits";
                "᧐᧑᧒᧓᧔᧕᧖᧗᧘᧙",
                    "_type";
                "numeric";
            }
            "taml";
            {
                "_rules";
                "tamil",
                    "_type";
                "algorithmic";
            }
            "tamldec";
            {
                "_digits";
                "௦௧௨௩௪௫௬௭௮௯",
                    "_type";
                "numeric";
            }
            "telu";
            {
                "_digits";
                "౦౧౨౩౪౫౬౭౮౯",
                    "_type";
                "numeric";
            }
            "thai";
            {
                "_digits";
                "๐๑๒๓๔๕๖๗๘๙",
                    "_type";
                "numeric";
            }
            "tibt";
            {
                "_digits";
                "༠༡༢༣༤༥༦༧༨༩",
                    "_type";
                "numeric";
            }
            "tirh";
            {
                "_digits";
                "𑓐𑓑𑓒𑓓𑓔𑓕𑓖𑓗𑓘𑓙",
                    "_type";
                "numeric";
            }
            "vaii";
            {
                "_digits";
                "꘠꘡꘢꘣꘤꘥꘦꘧꘨꘩",
                    "_type";
                "numeric";
            }
            "wara";
            {
                "_digits";
                "𑣠𑣡𑣢𑣣𑣤𑣥𑣦𑣧𑣨𑣩",
                    "_type";
                "numeric";
            }
        }
    }
}
Copied to clipboard
{
    "main";
    {
        "de";
        {
            "identity";
            {
                "version";
                {
                    "_number";
                    "$Revision: 13259 $",
                        "_cldrVersion";
                    "31";
                }
                "language";
                "de";
            }
            "numbers";
            {
                "defaultNumberingSystem";
                "latn",
                    "otherNumberingSystems";
                {
                    "native";
                    "latn";
                }
                "minimumGroupingDigits";
                "1",
                    "symbols-numberSystem-latn";
                {
                    "decimal";
                    ",",
                        "group";
                    ".",
                        "list";
                    ";",
                        "percentSign";
                    "%",
                        "plusSign";
                    "+",
                        "minusSign";
                    "-",
                        "exponential";
                    "E",
                        "superscriptingExponent";
                    "·",
                        "perMille";
                    "‰",
                        "infinity";
                    "∞",
                        "nan";
                    "NaN",
                        "timeSeparator";
                    ":";
                }
                "decimalFormats-numberSystem-latn";
                {
                    "standard";
                    "#,##0.###",
                        "long";
                    {
                        "decimalFormat";
                        {
                            "1000-count-one";
                            "0 Tausend",
                                "1000-count-other";
                            "0 Tausend",
                                "10000-count-one";
                            "00 Tausend",
                                "10000-count-other";
                            "00 Tausend",
                                "100000-count-one";
                            "000 Tausend",
                                "100000-count-other";
                            "000 Tausend",
                                "1000000-count-one";
                            "0 Million",
                                "1000000-count-other";
                            "0 Millionen",
                                "10000000-count-one";
                            "00 Millionen",
                                "10000000-count-other";
                            "00 Millionen",
                                "100000000-count-one";
                            "000 Millionen",
                                "100000000-count-other";
                            "000 Millionen",
                                "1000000000-count-one";
                            "0 Milliarde",
                                "1000000000-count-other";
                            "0 Milliarden",
                                "10000000000-count-one";
                            "00 Milliarden",
                                "10000000000-count-other";
                            "00 Milliarden",
                                "100000000000-count-one";
                            "000 Milliarden",
                                "100000000000-count-other";
                            "000 Milliarden",
                                "1000000000000-count-one";
                            "0 Billion",
                                "1000000000000-count-other";
                            "0 Billionen",
                                "10000000000000-count-one";
                            "00 Billionen",
                                "10000000000000-count-other";
                            "00 Billionen",
                                "100000000000000-count-one";
                            "000 Billionen",
                                "100000000000000-count-other";
                            "000 Billionen";
                        }
                    }
                    "short";
                    {
                        "decimalFormat";
                        {
                            "1000-count-one";
                            "0",
                                "1000-count-other";
                            "0",
                                "10000-count-one";
                            "0",
                                "10000-count-other";
                            "0",
                                "100000-count-one";
                            "0",
                                "100000-count-other";
                            "0",
                                "1000000-count-one";
                            "0 Mio'.'",
                                "1000000-count-other";
                            "0 Mio'.'",
                                "10000000-count-one";
                            "00 Mio'.'",
                                "10000000-count-other";
                            "00 Mio'.'",
                                "100000000-count-one";
                            "000 Mio'.'",
                                "100000000-count-other";
                            "000 Mio'.'",
                                "1000000000-count-one";
                            "0 Mrd'.'",
                                "1000000000-count-other";
                            "0 Mrd'.'",
                                "10000000000-count-one";
                            "00 Mrd'.'",
                                "10000000000-count-other";
                            "00 Mrd'.'",
                                "100000000000-count-one";
                            "000 Mrd'.'",
                                "100000000000-count-other";
                            "000 Mrd'.'",
                                "1000000000000-count-one";
                            "0 Bio'.'",
                                "1000000000000-count-other";
                            "0 Bio'.'",
                                "10000000000000-count-one";
                            "00 Bio'.'",
                                "10000000000000-count-other";
                            "00 Bio'.'",
                                "100000000000000-count-one";
                            "000 Bio'.'",
                                "100000000000000-count-other";
                            "000 Bio'.'";
                        }
                    }
                }
                "scientificFormats-numberSystem-latn";
                {
                    "standard";
                    "#E0";
                }
                "percentFormats-numberSystem-latn";
                {
                    "standard";
                    "#,##0 %";
                }
                "currencyFormats-numberSystem-latn";
                {
                    "currencySpacing";
                    {
                        "beforeCurrency";
                        {
                            "currencyMatch";
                            "[:^S:]",
                                "surroundingMatch";
                            "[:digit:]",
                                "insertBetween";
                            " ";
                        }
                        "afterCurrency";
                        {
                            "currencyMatch";
                            "[:^S:]",
                                "surroundingMatch";
                            "[:digit:]",
                                "insertBetween";
                            " ";
                        }
                    }
                    "standard";
                    "#,##0.00 ¤",
                        "accounting";
                    "#,##0.00 ¤",
                        "short";
                    {
                        "standard";
                        {
                            "1000-count-one";
                            "0 Tsd'.' ¤",
                                "1000-count-other";
                            "0 Tsd'.' ¤",
                                "10000-count-one";
                            "00 Tsd'.' ¤",
                                "10000-count-other";
                            "00 Tsd'.' ¤",
                                "100000-count-one";
                            "000 Tsd'.' ¤",
                                "100000-count-other";
                            "000 Tsd'.' ¤",
                                "1000000-count-one";
                            "0 Mio'.' ¤",
                                "1000000-count-other";
                            "0 Mio'.' ¤",
                                "10000000-count-one";
                            "00 Mio'.' ¤",
                                "10000000-count-other";
                            "00 Mio'.' ¤",
                                "100000000-count-one";
                            "000 Mio'.' ¤",
                                "100000000-count-other";
                            "000 Mio'.' ¤",
                                "1000000000-count-one";
                            "0 Mrd'.' ¤",
                                "1000000000-count-other";
                            "0 Mrd'.' ¤",
                                "10000000000-count-one";
                            "00 Mrd'.' ¤",
                                "10000000000-count-other";
                            "00 Mrd'.' ¤",
                                "100000000000-count-one";
                            "000 Mrd'.' ¤",
                                "100000000000-count-other";
                            "000 Mrd'.' ¤",
                                "1000000000000-count-one";
                            "0 Bio'.' ¤",
                                "1000000000000-count-other";
                            "0 Bio'.' ¤",
                                "10000000000000-count-one";
                            "00 Bio'.' ¤",
                                "10000000000000-count-other";
                            "00 Bio'.' ¤",
                                "100000000000000-count-one";
                            "000 Bio'.' ¤",
                                "100000000000000-count-other";
                            "000 Bio'.' ¤";
                        }
                    }
                    "unitPattern-count-one";
                    "{0} {1}",
                        "unitPattern-count-other";
                    "{0} {1}";
                }
                "miscPatterns-numberSystem-latn";
                {
                    "atLeast";
                    "{0}+",
                        "range";
                    "{0}–{1}";
                }
                "minimalPairs";
                {
                    "pluralMinimalPairs";
                    "{0} Tag",
                        "pluralMinimalPairs";
                    "{0} Tage",
                        "other";
                    "{0}. Abzweigung nach rechts nehmen";
                }
            }
        }
    }
}
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React TimePicker</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='timer'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
//Load the L10n, loadCldr from ej2-base
import { loadCldr, L10n } from '@syncfusion/ej2-base';
//import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
//import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';

// enable ripple effect
enableRipple(true);

//load the CLDR data files.
// Here we have referred local json files for preview purpose
import * as numberingSystems from './numberingSystems.json';
import * as gregorian from './ca-gregorian.json';
import * as numbers from './numbers.json';

loadCldr(numberingSystems, gregorian, numbers);

L10n.load({
'de': {
    'timepicker': { placeholder: 'Wählen Sie Zeit' }
}
});
//import the timepickercomponent
class App extends React.Component<{}, {}> {
render() {
    return <TimePickerComponent id="time" locale='de'/>
}
};
ReactDOM.render(<App />, document.getElementById('timer'));

[Functional-component]

Source
Preview
ca-gregorian.jsx
index.jsx
numberingSystems.jsx
numbers.jsx
index.html
index.tsx
Copied to clipboard
{
    "main";
    {
        "de";
        {
            "identity";
            {
                "version";
                {
                    "_number";
                    "$Revision: 12879 $",
                        "_cldrVersion";
                    "30.0.3";
                }
                "language";
                "de";
            }
            "dates";
            {
                "calendars";
                {
                    "gregorian";
                    {
                        "months";
                        {
                            "format";
                            {
                                "abbreviated";
                                {
                                    "1";
                                    "Jan.",
                                        "2";
                                    "Feb.",
                                        "3";
                                    "März",
                                        "4";
                                    "Apr.",
                                        "5";
                                    "Mai",
                                        "6";
                                    "Juni",
                                        "7";
                                    "Juli",
                                        "8";
                                    "Aug.",
                                        "9";
                                    "Sep.",
                                        "10";
                                    "Okt.",
                                        "11";
                                    "Nov.",
                                        "12";
                                    "Dez.";
                                }
                                "narrow";
                                {
                                    "1";
                                    "J",
                                        "2";
                                    "F",
                                        "3";
                                    "M",
                                        "4";
                                    "A",
                                        "5";
                                    "M",
                                        "6";
                                    "J",
                                        "7";
                                    "J",
                                        "8";
                                    "A",
                                        "9";
                                    "S",
                                        "10";
                                    "O",
                                        "11";
                                    "N",
                                        "12";
                                    "D";
                                }
                                "wide";
                                {
                                    "1";
                                    "Januar",
                                        "2";
                                    "Februar",
                                        "3";
                                    "März",
                                        "4";
                                    "April",
                                        "5";
                                    "Mai",
                                        "6";
                                    "Juni",
                                        "7";
                                    "Juli",
                                        "8";
                                    "August",
                                        "9";
                                    "September",
                                        "10";
                                    "Oktober",
                                        "11";
                                    "November",
                                        "12";
                                    "Dezember";
                                }
                            }
                            "stand-alone";
                            {
                                "abbreviated";
                                {
                                    "1";
                                    "Jan",
                                        "2";
                                    "Feb",
                                        "3";
                                    "Mär",
                                        "4";
                                    "Apr",
                                        "5";
                                    "Mai",
                                        "6";
                                    "Jun",
                                        "7";
                                    "Jul",
                                        "8";
                                    "Aug",
                                        "9";
                                    "Sep",
                                        "10";
                                    "Okt",
                                        "11";
                                    "Nov",
                                        "12";
                                    "Dez";
                                }
                                "narrow";
                                {
                                    "1";
                                    "J",
                                        "2";
                                    "F",
                                        "3";
                                    "M",
                                        "4";
                                    "A",
                                        "5";
                                    "M",
                                        "6";
                                    "J",
                                        "7";
                                    "J",
                                        "8";
                                    "A",
                                        "9";
                                    "S",
                                        "10";
                                    "O",
                                        "11";
                                    "N",
                                        "12";
                                    "D";
                                }
                                "wide";
                                {
                                    "1";
                                    "Januar",
                                        "2";
                                    "Februar",
                                        "3";
                                    "März",
                                        "4";
                                    "April",
                                        "5";
                                    "Mai",
                                        "6";
                                    "Juni",
                                        "7";
                                    "Juli",
                                        "8";
                                    "August",
                                        "9";
                                    "September",
                                        "10";
                                    "Oktober",
                                        "11";
                                    "November",
                                        "12";
                                    "Dezember";
                                }
                            }
                        }
                        "days";
                        {
                            "format";
                            {
                                "abbreviated";
                                {
                                    "sun";
                                    "So.",
                                        "mon";
                                    "Mo.",
                                        "tue";
                                    "Di.",
                                        "wed";
                                    "Mi.",
                                        "thu";
                                    "Do.",
                                        "fri";
                                    "Fr.",
                                        "sat";
                                    "Sa.";
                                }
                                "narrow";
                                {
                                    "sun";
                                    "S",
                                        "mon";
                                    "M",
                                        "tue";
                                    "D",
                                        "wed";
                                    "M",
                                        "thu";
                                    "D",
                                        "fri";
                                    "F",
                                        "sat";
                                    "S";
                                }
                                "short";
                                {
                                    "sun";
                                    "So.",
                                        "mon";
                                    "Mo.",
                                        "tue";
                                    "Di.",
                                        "wed";
                                    "Mi.",
                                        "thu";
                                    "Do.",
                                        "fri";
                                    "Fr.",
                                        "sat";
                                    "Sa.";
                                }
                                "wide";
                                {
                                    "sun";
                                    "Sonntag",
                                        "mon";
                                    "Montag",
                                        "tue";
                                    "Dienstag",
                                        "wed";
                                    "Mittwoch",
                                        "thu";
                                    "Donnerstag",
                                        "fri";
                                    "Freitag",
                                        "sat";
                                    "Samstag";
                                }
                            }
                            "stand-alone";
                            {
                                "abbreviated";
                                {
                                    "sun";
                                    "So",
                                        "mon";
                                    "Mo",
                                        "tue";
                                    "Di",
                                        "wed";
                                    "Mi",
                                        "thu";
                                    "Do",
                                        "fri";
                                    "Fr",
                                        "sat";
                                    "Sa";
                                }
                                "narrow";
                                {
                                    "sun";
                                    "S",
                                        "mon";
                                    "M",
                                        "tue";
                                    "D",
                                        "wed";
                                    "M",
                                        "thu";
                                    "D",
                                        "fri";
                                    "F",
                                        "sat";
                                    "S";
                                }
                                "short";
                                {
                                    "sun";
                                    "So.",
                                        "mon";
                                    "Mo.",
                                        "tue";
                                    "Di.",
                                        "wed";
                                    "Mi.",
                                        "thu";
                                    "Do.",
                                        "fri";
                                    "Fr.",
                                        "sat";
                                    "Sa.";
                                }
                                "wide";
                                {
                                    "sun";
                                    "Sonntag",
                                        "mon";
                                    "Montag",
                                        "tue";
                                    "Dienstag",
                                        "wed";
                                    "Mittwoch",
                                        "thu";
                                    "Donnerstag",
                                        "fri";
                                    "Freitag",
                                        "sat";
                                    "Samstag";
                                }
                            }
                        }
                        "quarters";
                        {
                            "format";
                            {
                                "abbreviated";
                                {
                                    "1";
                                    "Q1",
                                        "2";
                                    "Q2",
                                        "3";
                                    "Q3",
                                        "4";
                                    "Q4";
                                }
                                "narrow";
                                {
                                    "1";
                                    "1",
                                        "2";
                                    "2",
                                        "3";
                                    "3",
                                        "4";
                                    "4";
                                }
                                "wide";
                                {
                                    "1";
                                    "1. Quartal",
                                        "2";
                                    "2. Quartal",
                                        "3";
                                    "3. Quartal",
                                        "4";
                                    "4. Quartal";
                                }
                            }
                            "stand-alone";
                            {
                                "abbreviated";
                                {
                                    "1";
                                    "Q1",
                                        "2";
                                    "Q2",
                                        "3";
                                    "Q3",
                                        "4";
                                    "Q4";
                                }
                                "narrow";
                                {
                                    "1";
                                    "1",
                                        "2";
                                    "2",
                                        "3";
                                    "3",
                                        "4";
                                    "4";
                                }
                                "wide";
                                {
                                    "1";
                                    "1. Quartal",
                                        "2";
                                    "2. Quartal",
                                        "3";
                                    "3. Quartal",
                                        "4";
                                    "4. Quartal";
                                }
                            }
                        }
                        "dayPeriods";
                        {
                            "format";
                            {
                                "abbreviated";
                                {
                                    "midnight";
                                    "Mitternacht",
                                        "am";
                                    "vorm.",
                                        "pm";
                                    "nachm.",
                                        "morning1";
                                    "morgens",
                                        "morning2";
                                    "vormittags",
                                        "afternoon1";
                                    "mittags",
                                        "afternoon2";
                                    "nachmittags",
                                        "evening1";
                                    "abends",
                                        "night1";
                                    "nachts";
                                }
                                "narrow";
                                {
                                    "midnight";
                                    "Mitternacht",
                                        "am";
                                    "vm.",
                                        "pm";
                                    "nm.",
                                        "morning1";
                                    "morgens",
                                        "morning2";
                                    "vormittags",
                                        "afternoon1";
                                    "mittags",
                                        "afternoon2";
                                    "nachmittags",
                                        "evening1";
                                    "abends",
                                        "night1";
                                    "nachts";
                                }
                                "wide";
                                {
                                    "midnight";
                                    "Mitternacht",
                                        "am";
                                    "vorm.",
                                        "pm";
                                    "nachm.",
                                        "morning1";
                                    "morgens",
                                        "morning2";
                                    "vormittags",
                                        "afternoon1";
                                    "mittags",
                                        "afternoon2";
                                    "nachmittags",
                                        "evening1";
                                    "abends",
                                        "night1";
                                    "nachts";
                                }
                            }
                            "stand-alone";
                            {
                                "abbreviated";
                                {
                                    "midnight";
                                    "Mitternacht",
                                        "am";
                                    "vorm.",
                                        "pm";
                                    "nachm.",
                                        "morning1";
                                    "Morgen",
                                        "morning2";
                                    "Vormittag",
                                        "afternoon1";
                                    "Mittag",
                                        "afternoon2";
                                    "Nachmittag",
                                        "evening1";
                                    "Abend",
                                        "night1";
                                    "Nacht";
                                }
                                "narrow";
                                {
                                    "midnight";
                                    "Mitternacht",
                                        "am";
                                    "vorm.",
                                        "pm";
                                    "nachm.",
                                        "morning1";
                                    "Morgen",
                                        "morning2";
                                    "Vormittag",
                                        "afternoon1";
                                    "Mittag",
                                        "afternoon2";
                                    "Nachmittag",
                                        "evening1";
                                    "Abend",
                                        "night1";
                                    "Nacht";
                                }
                                "wide";
                                {
                                    "midnight";
                                    "Mitternacht",
                                        "am";
                                    "vorm.",
                                        "pm";
                                    "nachm.",
                                        "morning1";
                                    "Morgen",
                                        "morning2";
                                    "Vormittag",
                                        "afternoon1";
                                    "Mittag",
                                        "afternoon2";
                                    "Nachmittag",
                                        "evening1";
                                    "Abend",
                                        "night1";
                                    "Nacht";
                                }
                            }
                        }
                        "eras";
                        {
                            "eraNames";
                            {
                                "0";
                                "v. Chr.",
                                    "0-alt-variant";
                                "vor unserer Zeitrechnung",
                                    "1";
                                "n. Chr.",
                                    "1-alt-variant";
                                "unserer Zeitrechnung";
                            }
                            "eraAbbr";
                            {
                                "0";
                                "v. Chr.",
                                    "0-alt-variant";
                                "v. u. Z.",
                                    "1";
                                "n. Chr.",
                                    "1-alt-variant";
                                "u. Z.";
                            }
                            "eraNarrow";
                            {
                                "0";
                                "v. Chr.",
                                    "0-alt-variant";
                                "v. u. Z.",
                                    "1";
                                "n. Chr.",
                                    "1-alt-variant";
                                "u. Z.";
                            }
                        }
                        "dateFormats";
                        {
                            "full";
                            "EEEE, d. MMMM y",
                                "long";
                            "d. MMMM y",
                                "medium";
                            "dd.MM.y",
                                "short";
                            "dd.MM.yy";
                        }
                        "timeFormats";
                        {
                            "full";
                            "HH:mm:ss zzzz",
                                "long";
                            "HH:mm:ss z",
                                "medium";
                            "HH:mm:ss",
                                "short";
                            "HH:mm";
                        }
                        "dateTimeFormats";
                        {
                            "full";
                            "{1} 'um' {0}",
                                "long";
                            "{1} 'um' {0}",
                                "medium";
                            "{1}, {0}",
                                "short";
                            "{1}, {0}",
                                "availableFormats";
                            {
                                "d";
                                "d",
                                    "E";
                                "ccc",
                                    "Ed";
                                "E, d.",
                                    "Ehm";
                                "E h:mm a",
                                    "EHm";
                                "E, HH:mm",
                                    "Ehms";
                                "E, h:mm:ss a",
                                    "EHms";
                                "E, HH:mm:ss",
                                    "Gy";
                                "y G",
                                    "GyMMM";
                                "MMM y G",
                                    "GyMMMd";
                                "d. MMM y G",
                                    "GyMMMEd";
                                "E, d. MMM y G",
                                    "h";
                                "h 'Uhr' a",
                                    "H";
                                "HH 'Uhr'",
                                    "hm";
                                "h:mm a",
                                    "Hm";
                                "HH:mm",
                                    "hms";
                                "h:mm:ss a",
                                    "Hms";
                                "HH:mm:ss",
                                    "hmsv";
                                "h:mm:ss a v",
                                    "Hmsv";
                                "HH:mm:ss v",
                                    "hmv";
                                "h:mm a v",
                                    "Hmv";
                                "HH:mm v",
                                    "M";
                                "L",
                                    "Md";
                                "d.M.",
                                    "MEd";
                                "E, d.M.",
                                    "MMd";
                                "d.MM.",
                                    "MMdd";
                                "dd.MM.",
                                    "MMM";
                                "LLL",
                                    "MMMd";
                                "d. MMM",
                                    "MMMEd";
                                "E, d. MMM",
                                    "MMMMd";
                                "d. MMMM",
                                    "MMMMEd";
                                "E, d. MMMM",
                                    "MMMMW";
                                "'Woche' W 'im' MMM",
                                    "MMMMW";
                                "'Woche' W 'im' MMM",
                                    "ms";
                                "mm:ss",
                                    "y";
                                "y",
                                    "yM";
                                "M.y",
                                    "yMd";
                                "d.M.y",
                                    "yMEd";
                                "E, d.M.y",
                                    "yMM";
                                "MM.y",
                                    "yMMdd";
                                "dd.MM.y",
                                    "yMMM";
                                "MMM y",
                                    "yMMMd";
                                "d. MMM y",
                                    "yMMMEd";
                                "E, d. MMM y",
                                    "yMMMM";
                                "MMMM y",
                                    "yQQQ";
                                "QQQ y",
                                    "yQQQQ";
                                "QQQQ y",
                                    "yw";
                                "'Woche' w 'des' 'Jahres' y",
                                    "yw";
                                "'Woche' w 'des' 'Jahres' y";
                            }
                            "appendItems";
                            {
                                "Day";
                                "{0} ({2}: {1})",
                                    "Day-Of-Week";
                                "{0} {1}",
                                    "Era";
                                "{1} {0}",
                                    "Hour";
                                "{0} ({2}: {1})",
                                    "Minute";
                                "{0} ({2}: {1})",
                                    "Month";
                                "{0} ({2}: {1})",
                                    "Quarter";
                                "{0} ({2}: {1})",
                                    "Second";
                                "{0} ({2}: {1})",
                                    "Timezone";
                                "{0} {1}",
                                    "Week";
                                "{0} ({2}: {1})",
                                    "Year";
                                "{1} {0}";
                            }
                            "intervalFormats";
                            {
                                "intervalFormatFallback";
                                "{0} – {1}",
                                    "d";
                                {
                                    "d";
                                    "d.–d.";
                                }
                                "h";
                                {
                                    "a";
                                    "h 'Uhr' a – h 'Uhr' a",
                                        "h";
                                    "h – h 'Uhr' a";
                                }
                                "H";
                                {
                                    "H";
                                    "HH–HH 'Uhr'";
                                }
                                "hm";
                                {
                                    "a";
                                    "h:mm a – h:mm a",
                                        "h";
                                    "h:mm–h:mm a",
                                        "m";
                                    "h:mm–h:mm a";
                                }
                                "Hm";
                                {
                                    "H";
                                    "HH:mm–HH:mm 'Uhr'",
                                        "m";
                                    "HH:mm–HH:mm 'Uhr'";
                                }
                                "hmv";
                                {
                                    "a";
                                    "h:mm a – h:mm a v",
                                        "h";
                                    "h:mm–h:mm a v",
                                        "m";
                                    "h:mm–h:mm a v";
                                }
                                "Hmv";
                                {
                                    "H";
                                    "HH:mm–HH:mm 'Uhr' v",
                                        "m";
                                    "HH:mm–HH:mm 'Uhr' v";
                                }
                                "hv";
                                {
                                    "a";
                                    "h a – h a v",
                                        "h";
                                    "h–h a v";
                                }
                                "Hv";
                                {
                                    "H";
                                    "HH–HH 'Uhr' v";
                                }
                                "M";
                                {
                                    "M";
                                    "M.–M.";
                                }
                                "Md";
                                {
                                    "d";
                                    "dd.MM. – dd.MM.",
                                        "M";
                                    "dd.MM. – dd.MM.";
                                }
                                "MEd";
                                {
                                    "d";
                                    "E, dd.MM. – E, dd.MM.",
                                        "M";
                                    "E, dd.MM. – E, dd.MM.";
                                }
                                "MMM";
                                {
                                    "M";
                                    "MMM–MMM";
                                }
                                "MMMd";
                                {
                                    "d";
                                    "d.–d. MMM",
                                        "M";
                                    "d. MMM – d. MMM";
                                }
                                "MMMEd";
                                {
                                    "d";
                                    "E, d. – E, d. MMM",
                                        "M";
                                    "E, d. MMM – E, d. MMM";
                                }
                                "MMMM";
                                {
                                    "M";
                                    "LLLL–LLLL";
                                }
                                "y";
                                {
                                    "y";
                                    "y–y";
                                }
                                "yM";
                                {
                                    "M";
                                    "MM.y – MM.y",
                                        "y";
                                    "MM.y – MM.y";
                                }
                                "yMd";
                                {
                                    "d";
                                    "dd.MM.y – dd.MM.y",
                                        "M";
                                    "dd.MM.y – dd.MM.y",
                                        "y";
                                    "dd.MM.y – dd.MM.y";
                                }
                                "yMEd";
                                {
                                    "d";
                                    "E, dd.MM.y – E, dd.MM.y",
                                        "M";
                                    "E, dd.MM.y – E, dd.MM.y",
                                        "y";
                                    "E, dd.MM.y – E, dd.MM.y";
                                }
                                "yMMM";
                                {
                                    "M";
                                    "MMM–MMM y",
                                        "y";
                                    "MMM y – MMM y";
                                }
                                "yMMMd";
                                {
                                    "d";
                                    "d.–d. MMM y",
                                        "M";
                                    "d. MMM – d. MMM y",
                                        "y";
                                    "d. MMM y – d. MMM y";
                                }
                                "yMMMEd";
                                {
                                    "d";
                                    "E, d. – E, d. MMM y",
                                        "M";
                                    "E, d. MMM – E, d. MMM y",
                                        "y";
                                    "E, d. MMM y – E, d. MMM y";
                                }
                                "yMMMM";
                                {
                                    "M";
                                    "MMMM–MMMM y",
                                        "y";
                                    "MMMM y – MMMM y";
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
//Load the L10n, loadCldr from ej2-base
import { loadCldr, L10n } from '@syncfusion/ej2-base';
//import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
//import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
// enable ripple effect
enableRipple(true);
//load the CLDR data files.
// Here we have referred local json files for preview purpose
import * as numberingSystems from './numberingSystems.json';
import * as gregorian from './ca-gregorian.json';
import * as numbers from './numbers.json';
loadCldr(numberingSystems, gregorian, numbers);
L10n.load({
    'de': {
        'timepicker': { placeholder: 'Wählen Sie Zeit' }
    }
});
//import the timepickercomponent
function App() {
    return <TimePickerComponent id="time" locale='de'/>;
}
;
ReactDOM.render(<App />, document.getElementById('timer'));
Copied to clipboard
{
    "supplemental";
    {
        "version";
        {
            "_number";
            "$Revision: 12732 $",
                "_unicodeVersion";
            "9.0.0",
                "_cldrVersion";
            "31";
        }
        "numberingSystems";
        {
            "adlm";
            {
                "_digits";
                "𞥐𞥑𞥒𞥓𞥔𞥕𞥖𞥗𞥘𞥙",
                    "_type";
                "numeric";
            }
            "ahom";
            {
                "_digits";
                "𑜰𑜱𑜲𑜳𑜴𑜵𑜶𑜷𑜸𑜹",
                    "_type";
                "numeric";
            }
            "arab";
            {
                "_digits";
                "٠١٢٣٤٥٦٧٨٩",
                    "_type";
                "numeric";
            }
            "arabext";
            {
                "_digits";
                "۰۱۲۳۴۵۶۷۸۹",
                    "_type";
                "numeric";
            }
            "armn";
            {
                "_rules";
                "armenian-upper",
                    "_type";
                "algorithmic";
            }
            "armnlow";
            {
                "_rules";
                "armenian-lower",
                    "_type";
                "algorithmic";
            }
            "bali";
            {
                "_digits";
                "᭐᭑᭒᭓᭔᭕᭖᭗᭘᭙",
                    "_type";
                "numeric";
            }
            "beng";
            {
                "_digits";
                "০১২৩৪৫৬৭৮৯",
                    "_type";
                "numeric";
            }
            "bhks";
            {
                "_digits";
                "𑱐𑱑𑱒𑱓𑱔𑱕𑱖𑱗𑱘𑱙",
                    "_type";
                "numeric";
            }
            "brah";
            {
                "_digits";
                "𑁦𑁧𑁨𑁩𑁪𑁫𑁬𑁭𑁮𑁯",
                    "_type";
                "numeric";
            }
            "cakm";
            {
                "_digits";
                "𑄶𑄷𑄸𑄹𑄺𑄻𑄼𑄽𑄾𑄿",
                    "_type";
                "numeric";
            }
            "cham";
            {
                "_digits";
                "꩐꩑꩒꩓꩔꩕꩖꩗꩘꩙",
                    "_type";
                "numeric";
            }
            "cyrl";
            {
                "_rules";
                "cyrillic-lower",
                    "_type";
                "algorithmic";
            }
            "deva";
            {
                "_digits";
                "०१२३४५६७८९",
                    "_type";
                "numeric";
            }
            "ethi";
            {
                "_rules";
                "ethiopic",
                    "_type";
                "algorithmic";
            }
            "fullwide";
            {
                "_digits";
                "0123456789",
                    "_type";
                "numeric";
            }
            "geor";
            {
                "_rules";
                "georgian",
                    "_type";
                "algorithmic";
            }
            "grek";
            {
                "_rules";
                "greek-upper",
                    "_type";
                "algorithmic";
            }
            "greklow";
            {
                "_rules";
                "greek-lower",
                    "_type";
                "algorithmic";
            }
            "gujr";
            {
                "_digits";
                "૦૧૨૩૪૫૬૭૮૯",
                    "_type";
                "numeric";
            }
            "guru";
            {
                "_digits";
                "੦੧੨੩੪੫੬੭੮੯",
                    "_type";
                "numeric";
            }
            "hanidays";
            {
                "_rules";
                "zh/SpelloutRules/spellout-numbering-days",
                    "_type";
                "algorithmic";
            }
            "hanidec";
            {
                "_digits";
                "〇一二三四五六七八九",
                    "_type";
                "numeric";
            }
            "hans";
            {
                "_rules";
                "zh/SpelloutRules/spellout-cardinal",
                    "_type";
                "algorithmic";
            }
            "hansfin";
            {
                "_rules";
                "zh/SpelloutRules/spellout-cardinal-financial",
                    "_type";
                "algorithmic";
            }
            "hant";
            {
                "_rules";
                "zh_Hant/SpelloutRules/spellout-cardinal",
                    "_type";
                "algorithmic";
            }
            "hantfin";
            {
                "_rules";
                "zh_Hant/SpelloutRules/spellout-cardinal-financial",
                    "_type";
                "algorithmic";
            }
            "hebr";
            {
                "_rules";
                "hebrew",
                    "_type";
                "algorithmic";
            }
            "hmng";
            {
                "_digits";
                "𖭐𖭑𖭒𖭓𖭔𖭕𖭖𖭗𖭘𖭙",
                    "_type";
                "numeric";
            }
            "java";
            {
                "_digits";
                "꧐꧑꧒꧓꧔꧕꧖꧗꧘꧙",
                    "_type";
                "numeric";
            }
            "jpan";
            {
                "_rules";
                "ja/SpelloutRules/spellout-cardinal",
                    "_type";
                "algorithmic";
            }
            "jpanfin";
            {
                "_rules";
                "ja/SpelloutRules/spellout-cardinal-financial",
                    "_type";
                "algorithmic";
            }
            "kali";
            {
                "_digits";
                "꤀꤁꤂꤃꤄꤅꤆꤇꤈꤉",
                    "_type";
                "numeric";
            }
            "khmr";
            {
                "_digits";
                "០១២៣៤៥៦៧៨៩",
                    "_type";
                "numeric";
            }
            "knda";
            {
                "_digits";
                "೦೧೨೩೪೫೬೭೮೯",
                    "_type";
                "numeric";
            }
            "lana";
            {
                "_digits";
                "᪀᪁᪂᪃᪄᪅᪆᪇᪈᪉",
                    "_type";
                "numeric";
            }
            "lanatham";
            {
                "_digits";
                "᪐᪑᪒᪓᪔᪕᪖᪗᪘᪙",
                    "_type";
                "numeric";
            }
            "laoo";
            {
                "_digits";
                "໐໑໒໓໔໕໖໗໘໙",
                    "_type";
                "numeric";
            }
            "latn";
            {
                "_digits";
                "0123456789",
                    "_type";
                "numeric";
            }
            "lepc";
            {
                "_digits";
                "᱀᱁᱂᱃᱄᱅᱆᱇᱈᱉",
                    "_type";
                "numeric";
            }
            "limb";
            {
                "_digits";
                "᥆᥇᥈᥉᥊᥋᥌᥍᥎᥏",
                    "_type";
                "numeric";
            }
            "mathbold";
            {
                "_digits";
                "𝟎𝟏𝟐𝟑𝟒𝟓𝟔𝟕𝟖𝟗",
                    "_type";
                "numeric";
            }
            "mathdbl";
            {
                "_digits";
                "𝟘𝟙𝟚𝟛𝟜𝟝𝟞𝟟𝟠𝟡",
                    "_type";
                "numeric";
            }
            "mathmono";
            {
                "_digits";
                "𝟶𝟷𝟸𝟹𝟺𝟻𝟼𝟽𝟾𝟿",
                    "_type";
                "numeric";
            }
            "mathsanb";
            {
                "_digits";
                "𝟬𝟭𝟮𝟯𝟰𝟱𝟲𝟳𝟴𝟵",
                    "_type";
                "numeric";
            }
            "mathsans";
            {
                "_digits";
                "𝟢𝟣𝟤𝟥𝟦𝟧𝟨𝟩𝟪𝟫",
                    "_type";
                "numeric";
            }
            "mlym";
            {
                "_digits";
                "൦൧൨൩൪൫൬൭൮൯",
                    "_type";
                "numeric";
            }
            "modi";
            {
                "_digits";
                "𑙐𑙑𑙒𑙓𑙔𑙕𑙖𑙗𑙘𑙙",
                    "_type";
                "numeric";
            }
            "mong";
            {
                "_digits";
                "᠐᠑᠒᠓᠔᠕᠖᠗᠘᠙",
                    "_type";
                "numeric";
            }
            "mroo";
            {
                "_digits";
                "𖩠𖩡𖩢𖩣𖩤𖩥𖩦𖩧𖩨𖩩",
                    "_type";
                "numeric";
            }
            "mtei";
            {
                "_digits";
                "꯰꯱꯲꯳꯴꯵꯶꯷꯸꯹",
                    "_type";
                "numeric";
            }
            "mymr";
            {
                "_digits";
                "၀၁၂၃၄၅၆၇၈၉",
                    "_type";
                "numeric";
            }
            "mymrshan";
            {
                "_digits";
                "႐႑႒႓႔႕႖႗႘႙",
                    "_type";
                "numeric";
            }
            "mymrtlng";
            {
                "_digits";
                "꧰꧱꧲꧳꧴꧵꧶꧷꧸꧹",
                    "_type";
                "numeric";
            }
            "newa";
            {
                "_digits";
                "𑑐𑑑𑑒𑑓𑑔𑑕𑑖𑑗𑑘𑑙",
                    "_type";
                "numeric";
            }
            "nkoo";
            {
                "_digits";
                "߀߁߂߃߄߅߆߇߈߉",
                    "_type";
                "numeric";
            }
            "olck";
            {
                "_digits";
                "᱐᱑᱒᱓᱔᱕᱖᱗᱘᱙",
                    "_type";
                "numeric";
            }
            "orya";
            {
                "_digits";
                "୦୧୨୩୪୫୬୭୮୯",
                    "_type";
                "numeric";
            }
            "osma";
            {
                "_digits";
                "𐒠𐒡𐒢𐒣𐒤𐒥𐒦𐒧𐒨𐒩",
                    "_type";
                "numeric";
            }
            "roman";
            {
                "_rules";
                "roman-upper",
                    "_type";
                "algorithmic";
            }
            "romanlow";
            {
                "_rules";
                "roman-lower",
                    "_type";
                "algorithmic";
            }
            "saur";
            {
                "_digits";
                "꣐꣑꣒꣓꣔꣕꣖꣗꣘꣙",
                    "_type";
                "numeric";
            }
            "shrd";
            {
                "_digits";
                "𑇐𑇑𑇒𑇓𑇔𑇕𑇖𑇗𑇘𑇙",
                    "_type";
                "numeric";
            }
            "sind";
            {
                "_digits";
                "𑋰𑋱𑋲𑋳𑋴𑋵𑋶𑋷𑋸𑋹",
                    "_type";
                "numeric";
            }
            "sinh";
            {
                "_digits";
                "෦෧෨෩෪෫෬෭෮෯",
                    "_type";
                "numeric";
            }
            "sora";
            {
                "_digits";
                "𑃰𑃱𑃲𑃳𑃴𑃵𑃶𑃷𑃸𑃹",
                    "_type";
                "numeric";
            }
            "sund";
            {
                "_digits";
                "᮰᮱᮲᮳᮴᮵᮶᮷᮸᮹",
                    "_type";
                "numeric";
            }
            "takr";
            {
                "_digits";
                "𑛀𑛁𑛂𑛃𑛄𑛅𑛆𑛇𑛈𑛉",
                    "_type";
                "numeric";
            }
            "talu";
            {
                "_digits";
                "᧐᧑᧒᧓᧔᧕᧖᧗᧘᧙",
                    "_type";
                "numeric";
            }
            "taml";
            {
                "_rules";
                "tamil",
                    "_type";
                "algorithmic";
            }
            "tamldec";
            {
                "_digits";
                "௦௧௨௩௪௫௬௭௮௯",
                    "_type";
                "numeric";
            }
            "telu";
            {
                "_digits";
                "౦౧౨౩౪౫౬౭౮౯",
                    "_type";
                "numeric";
            }
            "thai";
            {
                "_digits";
                "๐๑๒๓๔๕๖๗๘๙",
                    "_type";
                "numeric";
            }
            "tibt";
            {
                "_digits";
                "༠༡༢༣༤༥༦༧༨༩",
                    "_type";
                "numeric";
            }
            "tirh";
            {
                "_digits";
                "𑓐𑓑𑓒𑓓𑓔𑓕𑓖𑓗𑓘𑓙",
                    "_type";
                "numeric";
            }
            "vaii";
            {
                "_digits";
                "꘠꘡꘢꘣꘤꘥꘦꘧꘨꘩",
                    "_type";
                "numeric";
            }
            "wara";
            {
                "_digits";
                "𑣠𑣡𑣢𑣣𑣤𑣥𑣦𑣧𑣨𑣩",
                    "_type";
                "numeric";
            }
        }
    }
}
Copied to clipboard
{
    "main";
    {
        "de";
        {
            "identity";
            {
                "version";
                {
                    "_number";
                    "$Revision: 13259 $",
                        "_cldrVersion";
                    "31";
                }
                "language";
                "de";
            }
            "numbers";
            {
                "defaultNumberingSystem";
                "latn",
                    "otherNumberingSystems";
                {
                    "native";
                    "latn";
                }
                "minimumGroupingDigits";
                "1",
                    "symbols-numberSystem-latn";
                {
                    "decimal";
                    ",",
                        "group";
                    ".",
                        "list";
                    ";",
                        "percentSign";
                    "%",
                        "plusSign";
                    "+",
                        "minusSign";
                    "-",
                        "exponential";
                    "E",
                        "superscriptingExponent";
                    "·",
                        "perMille";
                    "‰",
                        "infinity";
                    "∞",
                        "nan";
                    "NaN",
                        "timeSeparator";
                    ":";
                }
                "decimalFormats-numberSystem-latn";
                {
                    "standard";
                    "#,##0.###",
                        "long";
                    {
                        "decimalFormat";
                        {
                            "1000-count-one";
                            "0 Tausend",
                                "1000-count-other";
                            "0 Tausend",
                                "10000-count-one";
                            "00 Tausend",
                                "10000-count-other";
                            "00 Tausend",
                                "100000-count-one";
                            "000 Tausend",
                                "100000-count-other";
                            "000 Tausend",
                                "1000000-count-one";
                            "0 Million",
                                "1000000-count-other";
                            "0 Millionen",
                                "10000000-count-one";
                            "00 Millionen",
                                "10000000-count-other";
                            "00 Millionen",
                                "100000000-count-one";
                            "000 Millionen",
                                "100000000-count-other";
                            "000 Millionen",
                                "1000000000-count-one";
                            "0 Milliarde",
                                "1000000000-count-other";
                            "0 Milliarden",
                                "10000000000-count-one";
                            "00 Milliarden",
                                "10000000000-count-other";
                            "00 Milliarden",
                                "100000000000-count-one";
                            "000 Milliarden",
                                "100000000000-count-other";
                            "000 Milliarden",
                                "1000000000000-count-one";
                            "0 Billion",
                                "1000000000000-count-other";
                            "0 Billionen",
                                "10000000000000-count-one";
                            "00 Billionen",
                                "10000000000000-count-other";
                            "00 Billionen",
                                "100000000000000-count-one";
                            "000 Billionen",
                                "100000000000000-count-other";
                            "000 Billionen";
                        }
                    }
                    "short";
                    {
                        "decimalFormat";
                        {
                            "1000-count-one";
                            "0",
                                "1000-count-other";
                            "0",
                                "10000-count-one";
                            "0",
                                "10000-count-other";
                            "0",
                                "100000-count-one";
                            "0",
                                "100000-count-other";
                            "0",
                                "1000000-count-one";
                            "0 Mio'.'",
                                "1000000-count-other";
                            "0 Mio'.'",
                                "10000000-count-one";
                            "00 Mio'.'",
                                "10000000-count-other";
                            "00 Mio'.'",
                                "100000000-count-one";
                            "000 Mio'.'",
                                "100000000-count-other";
                            "000 Mio'.'",
                                "1000000000-count-one";
                            "0 Mrd'.'",
                                "1000000000-count-other";
                            "0 Mrd'.'",
                                "10000000000-count-one";
                            "00 Mrd'.'",
                                "10000000000-count-other";
                            "00 Mrd'.'",
                                "100000000000-count-one";
                            "000 Mrd'.'",
                                "100000000000-count-other";
                            "000 Mrd'.'",
                                "1000000000000-count-one";
                            "0 Bio'.'",
                                "1000000000000-count-other";
                            "0 Bio'.'",
                                "10000000000000-count-one";
                            "00 Bio'.'",
                                "10000000000000-count-other";
                            "00 Bio'.'",
                                "100000000000000-count-one";
                            "000 Bio'.'",
                                "100000000000000-count-other";
                            "000 Bio'.'";
                        }
                    }
                }
                "scientificFormats-numberSystem-latn";
                {
                    "standard";
                    "#E0";
                }
                "percentFormats-numberSystem-latn";
                {
                    "standard";
                    "#,##0 %";
                }
                "currencyFormats-numberSystem-latn";
                {
                    "currencySpacing";
                    {
                        "beforeCurrency";
                        {
                            "currencyMatch";
                            "[:^S:]",
                                "surroundingMatch";
                            "[:digit:]",
                                "insertBetween";
                            " ";
                        }
                        "afterCurrency";
                        {
                            "currencyMatch";
                            "[:^S:]",
                                "surroundingMatch";
                            "[:digit:]",
                                "insertBetween";
                            " ";
                        }
                    }
                    "standard";
                    "#,##0.00 ¤",
                        "accounting";
                    "#,##0.00 ¤",
                        "short";
                    {
                        "standard";
                        {
                            "1000-count-one";
                            "0 Tsd'.' ¤",
                                "1000-count-other";
                            "0 Tsd'.' ¤",
                                "10000-count-one";
                            "00 Tsd'.' ¤",
                                "10000-count-other";
                            "00 Tsd'.' ¤",
                                "100000-count-one";
                            "000 Tsd'.' ¤",
                                "100000-count-other";
                            "000 Tsd'.' ¤",
                                "1000000-count-one";
                            "0 Mio'.' ¤",
                                "1000000-count-other";
                            "0 Mio'.' ¤",
                                "10000000-count-one";
                            "00 Mio'.' ¤",
                                "10000000-count-other";
                            "00 Mio'.' ¤",
                                "100000000-count-one";
                            "000 Mio'.' ¤",
                                "100000000-count-other";
                            "000 Mio'.' ¤",
                                "1000000000-count-one";
                            "0 Mrd'.' ¤",
                                "1000000000-count-other";
                            "0 Mrd'.' ¤",
                                "10000000000-count-one";
                            "00 Mrd'.' ¤",
                                "10000000000-count-other";
                            "00 Mrd'.' ¤",
                                "100000000000-count-one";
                            "000 Mrd'.' ¤",
                                "100000000000-count-other";
                            "000 Mrd'.' ¤",
                                "1000000000000-count-one";
                            "0 Bio'.' ¤",
                                "1000000000000-count-other";
                            "0 Bio'.' ¤",
                                "10000000000000-count-one";
                            "00 Bio'.' ¤",
                                "10000000000000-count-other";
                            "00 Bio'.' ¤",
                                "100000000000000-count-one";
                            "000 Bio'.' ¤",
                                "100000000000000-count-other";
                            "000 Bio'.' ¤";
                        }
                    }
                    "unitPattern-count-one";
                    "{0} {1}",
                        "unitPattern-count-other";
                    "{0} {1}";
                }
                "miscPatterns-numberSystem-latn";
                {
                    "atLeast";
                    "{0}+",
                        "range";
                    "{0}–{1}";
                }
                "minimalPairs";
                {
                    "pluralMinimalPairs";
                    "{0} Tag",
                        "pluralMinimalPairs";
                    "{0} Tage",
                        "other";
                    "{0}. Abzweigung nach rechts nehmen";
                }
            }
        }
    }
}
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React TimePicker</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='timer'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
//Load the L10n, loadCldr from ej2-base
import { loadCldr, L10n } from '@syncfusion/ej2-base';
//import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
//import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';

// enable ripple effect
enableRipple(true);

//load the CLDR data files.
// Here we have referred local json files for preview purpose
import * as numberingSystems from './numberingSystems.json';
import * as gregorian from './ca-gregorian.json';
import * as numbers from './numbers.json';

loadCldr(numberingSystems, gregorian, numbers);

L10n.load({
'de': {
    'timepicker': { placeholder: 'Wählen Sie Zeit' }
}
});
//import the timepickercomponent
function App() {
return <TimePickerComponent id="time" locale='de'/>
};
ReactDOM.render(<App />, document.getElementById('timer'));

Right-To-Left

The TimePicker supports RTL (right-to-left) functionality for languages like Arabic and Hebrew to displays the text in the right-to-left direction. Use enableRtl property to set the RTL direction.

The code example demonstrates the TimePicker component in Arabic culture, also explains how to set the localized text to the placeholder using L10n.load method.

[Class-component]

Source
Preview
app.component.jsx
app.module.jsx
ca-gregorian.jsx
currencies.jsx
index.jsx
main.jsx
numberingSystems.jsx
numbers.jsx
timeZoneNames.jsx
index.html
index.tsx
Copied to clipboard
Copied to clipboard
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TimePickerModule } from '@syncfusion/ej2-ng-calendars';
import { AppComponent } from './app.component';
/**
 * Module
 */
let AppModule = class AppModule {
};
AppModule = __decorate([
    NgModule({
        imports: [
            BrowserModule,
            TimePickerModule
        ],
        declarations: [AppComponent],
        bootstrap: [AppComponent]
    })
], AppModule);
export { AppModule };
Copied to clipboard
{
    "main";
    {
        "ar";
        {
            "identity";
            {
                "version";
                {
                    "_number";
                    "$Revision: 12879 $",
                        "_cldrVersion";
                    "30.0.3";
                }
                "language";
                "ar";
            }
            "dates";
            {
                "calendars";
                {
                    "gregorian";
                    {
                        "months";
                        {
                            "format";
                            {
                                "abbreviated";
                                {
                                    "1";
                                    "يناير",
                                        "2";
                                    "فبراير",
                                        "3";
                                    "مارس",
                                        "4";
                                    "أبريل",
                                        "5";
                                    "مايو",
                                        "6";
                                    "يونيو",
                                        "7";
                                    "يوليو",
                                        "8";
                                    "أغسطس",
                                        "9";
                                    "سبتمبر",
                                        "10";
                                    "أكتوبر",
                                        "11";
                                    "نوفمبر",
                                        "12";
                                    "ديسمبر";
                                }
                                "narrow";
                                {
                                    "1";
                                    "ي",
                                        "2";
                                    "ف",
                                        "3";
                                    "م",
                                        "4";
                                    "أ",
                                        "5";
                                    "و",
                                        "6";
                                    "ن",
                                        "7";
                                    "ل",
                                        "8";
                                    "غ",
                                        "9";
                                    "س",
                                        "10";
                                    "ك",
                                        "11";
                                    "ب",
                                        "12";
                                    "د";
                                }
                                "wide";
                                {
                                    "1";
                                    "يناير",
                                        "2";
                                    "فبراير",
                                        "3";
                                    "مارس",
                                        "4";
                                    "أبريل",
                                        "5";
                                    "مايو",
                                        "6";
                                    "يونيو",
                                        "7";
                                    "يوليو",
                                        "8";
                                    "أغسطس",
                                        "9";
                                    "سبتمبر",
                                        "10";
                                    "أكتوبر",
                                        "11";
                                    "نوفمبر",
                                        "12";
                                    "ديسمبر";
                                }
                            }
                            "stand-alone";
                            {
                                "abbreviated";
                                {
                                    "1";
                                    "يناير",
                                        "2";
                                    "فبراير",
                                        "3";
                                    "مارس",
                                        "4";
                                    "أبريل",
                                        "5";
                                    "مايو",
                                        "6";
                                    "يونيو",
                                        "7";
                                    "يوليو",
                                        "8";
                                    "أغسطس",
                                        "9";
                                    "سبتمبر",
                                        "10";
                                    "أكتوبر",
                                        "11";
                                    "نوفمبر",
                                        "12";
                                    "ديسمبر";
                                }
                                "narrow";
                                {
                                    "1";
                                    "ي",
                                        "2";
                                    "ف",
                                        "3";
                                    "م",
                                        "4";
                                    "أ",
                                        "5";
                                    "و",
                                        "6";
                                    "ن",
                                        "7";
                                    "ل",
                                        "8";
                                    "غ",
                                        "9";
                                    "س",
                                        "10";
                                    "ك",
                                        "11";
                                    "ب",
                                        "12";
                                    "د";
                                }
                                "wide";
                                {
                                    "1";
                                    "يناير",
                                        "2";
                                    "فبراير",
                                        "3";
                                    "مارس",
                                        "4";
                                    "أبريل",
                                        "5";
                                    "مايو",
                                        "6";
                                    "يونيو",
                                        "7";
                                    "يوليو",
                                        "8";
                                    "أغسطس",
                                        "9";
                                    "سبتمبر",
                                        "10";
                                    "أكتوبر",
                                        "11";
                                    "نوفمبر",
                                        "12";
                                    "ديسمبر";
                                }
                            }
                        }
                        "days";
                        {
                            "format";
                            {
                                "abbreviated";
                                {
                                    "sun";
                                    "الأحد",
                                        "mon";
                                    "الاثنين",
                                        "tue";
                                    "الثلاثاء",
                                        "wed";
                                    "الأربعاء",
                                        "thu";
                                    "الخميس",
                                        "fri";
                                    "الجمعة",
                                        "sat";
                                    "السبت";
                                }
                                "narrow";
                                {
                                    "sun";
                                    "ح",
                                        "mon";
                                    "ن",
                                        "tue";
                                    "ث",
                                        "wed";
                                    "ر",
                                        "thu";
                                    "خ",
                                        "fri";
                                    "ج",
                                        "sat";
                                    "س";
                                }
                                "short";
                                {
                                    "sun";
                                    "الأحد",
                                        "mon";
                                    "الاثنين",
                                        "tue";
                                    "الثلاثاء",
                                        "wed";
                                    "الأربعاء",
                                        "thu";
                                    "الخميس",
                                        "fri";
                                    "الجمعة",
                                        "sat";
                                    "السبت";
                                }
                                "wide";
                                {
                                    "sun";
                                    "الأحد",
                                        "mon";
                                    "الاثنين",
                                        "tue";
                                    "الثلاثاء",
                                        "wed";
                                    "الأربعاء",
                                        "thu";
                                    "الخميس",
                                        "fri";
                                    "الجمعة",
                                        "sat";
                                    "السبت";
                                }
                            }
                            "stand-alone";
                            {
                                "abbreviated";
                                {
                                    "sun";
                                    "الأحد",
                                        "mon";
                                    "الاثنين",
                                        "tue";
                                    "الثلاثاء",
                                        "wed";
                                    "الأربعاء",
                                        "thu";
                                    "الخميس",
                                        "fri";
                                    "الجمعة",
                                        "sat";
                                    "السبت";
                                }
                                "narrow";
                                {
                                    "sun";
                                    "ح",
                                        "mon";
                                    "ن",
                                        "tue";
                                    "ث",
                                        "wed";
                                    "ر",
                                        "thu";
                                    "خ",
                                        "fri";
                                    "ج",
                                        "sat";
                                    "س";
                                }
                                "short";
                                {
                                    "sun";
                                    "الأحد",
                                        "mon";
                                    "الاثنين",
                                        "tue";
                                    "الثلاثاء",
                                        "wed";
                                    "الأربعاء",
                                        "thu";
                                    "الخميس",
                                        "fri";
                                    "الجمعة",
                                        "sat";
                                    "السبت";
                                }
                                "wide";
                                {
                                    "sun";
                                    "الأحد",
                                        "mon";
                                    "الاثنين",
                                        "tue";
                                    "الثلاثاء",
                                        "wed";
                                    "الأربعاء",
                                        "thu";
                                    "الخميس",
                                        "fri";
                                    "الجمعة",
                                        "sat";
                                    "السبت";
                                }
                            }
                        }
                        "quarters";
                        {
                            "format";
                            {
                                "abbreviated";
                                {
                                    "1";
                                    "الربع الأول",
                                        "2";
                                    "الربع الثاني",
                                        "3";
                                    "الربع الثالث",
                                        "4";
                                    "الربع الرابع";
                                }
                                "narrow";
                                {
                                    "1";
                                    "١",
                                        "2";
                                    "٢",
                                        "3";
                                    "٣",
                                        "4";
                                    "٤";
                                }
                                "wide";
                                {
                                    "1";
                                    "الربع الأول",
                                        "2";
                                    "الربع الثاني",
                                        "3";
                                    "الربع الثالث",
                                        "4";
                                    "الربع الرابع";
                                }
                            }
                            "stand-alone";
                            {
                                "abbreviated";
                                {
                                    "1";
                                    "الربع الأول",
                                        "2";
                                    "الربع الثاني",
                                        "3";
                                    "الربع الثالث",
                                        "4";
                                    "الربع الرابع";
                                }
                                "narrow";
                                {
                                    "1";
                                    "١",
                                        "2";
                                    "٢",
                                        "3";
                                    "٣",
                                        "4";
                                    "٤";
                                }
                                "wide";
                                {
                                    "1";
                                    "الربع الأول",
                                        "2";
                                    "الربع الثاني",
                                        "3";
                                    "الربع الثالث",
                                        "4";
                                    "الربع الرابع";
                                }
                            }
                        }
                        "dayPeriods";
                        {
                            "format";
                            {
                                "abbreviated";
                                {
                                    "am";
                                    "ص",
                                        "pm";
                                    "م",
                                        "morning1";
                                    "فجرا",
                                        "morning2";
                                    "ص",
                                        "afternoon1";
                                    "ظهرًا",
                                        "afternoon2";
                                    "بعد الظهر",
                                        "evening1";
                                    "مساءً",
                                        "night1";
                                    "منتصف الليل",
                                        "night2";
                                    "ل";
                                }
                                "narrow";
                                {
                                    "am";
                                    "ص",
                                        "pm";
                                    "م",
                                        "morning1";
                                    "فجرًا",
                                        "morning2";
                                    "صباحًا",
                                        "afternoon1";
                                    "ظهرًا",
                                        "afternoon2";
                                    "بعد الظهر",
                                        "evening1";
                                    "مساءً",
                                        "night1";
                                    "منتصف الليل",
                                        "night2";
                                    "ليلاً";
                                }
                                "wide";
                                {
                                    "am";
                                    "ص",
                                        "pm";
                                    "م",
                                        "morning1";
                                    "فجرًا",
                                        "morning2";
                                    "صباحًا",
                                        "afternoon1";
                                    "ظهرًا",
                                        "afternoon2";
                                    "بعد الظهر",
                                        "evening1";
                                    "مساءً",
                                        "night1";
                                    "منتصف الليل",
                                        "night2";
                                    "ليلاً";
                                }
                            }
                            "stand-alone";
                            {
                                "abbreviated";
                                {
                                    "am";
                                    "ص",
                                        "pm";
                                    "م",
                                        "morning1";
                                    "فجرا",
                                        "morning2";
                                    "ص",
                                        "afternoon1";
                                    "ظهرًا",
                                        "afternoon2";
                                    "بعد الظهر",
                                        "evening1";
                                    "مساءً",
                                        "night1";
                                    "منتصف الليل",
                                        "night2";
                                    "ليلاً";
                                }
                                "narrow";
                                {
                                    "am";
                                    "ص",
                                        "pm";
                                    "م",
                                        "morning1";
                                    "فجرا",
                                        "morning2";
                                    "صباحًا",
                                        "afternoon1";
                                    "ظهرًا",
                                        "afternoon2";
                                    "بعد الظهر",
                                        "evening1";
                                    "مساءً",
                                        "night1";
                                    "منتصف الليل",
                                        "night2";
                                    "ليلاً";
                                }
                                "wide";
                                {
                                    "am";
                                    "صباحًا",
                                        "pm";
                                    "مساءً",
                                        "morning1";
                                    "فجرًا",
                                        "morning2";
                                    "صباحًا",
                                        "afternoon1";
                                    "ظهرًا",
                                        "afternoon2";
                                    "بعد الظهر",
                                        "evening1";
                                    "مساءً",
                                        "night1";
                                    "منتصف الليل",
                                        "night2";
                                    "ليلاً";
                                }
                            }
                        }
                        "eras";
                        {
                            "eraNames";
                            {
                                "0";
                                "قبل الميلاد",
                                    "0-alt-variant";
                                "BCE",
                                    "1";
                                "ميلادي",
                                    "1-alt-variant";
                                "بعد الميلاد";
                            }
                            "eraAbbr";
                            {
                                "0";
                                "ق.م",
                                    "0-alt-variant";
                                "BCE",
                                    "1";
                                "م",
                                    "1-alt-variant";
                                "ب.م";
                            }
                            "eraNarrow";
                            {
                                "0";
                                "ق.م",
                                    "0-alt-variant";
                                "BCE",
                                    "1";
                                "م",
                                    "1-alt-variant";
                                "ب.م";
                            }
                        }
                        "dateFormats";
                        {
                            "full";
                            "EEEE، d MMMM، y",
                                "long";
                            "d MMMM، y",
                                "medium";
                            "dd‏/MM‏/y",
                                "short";
                            "d‏/M‏/y";
                        }
                        "timeFormats";
                        {
                            "full";
                            "h:mm:ss a zzzz",
                                "long";
                            "h:mm:ss a z",
                                "medium";
                            "h:mm:ss a",
                                "short";
                            "h:mm a";
                        }
                        "dateTimeFormats";
                        {
                            "full";
                            "{1} {0}",
                                "long";
                            "{1} {0}",
                                "medium";
                            "{1} {0}",
                                "short";
                            "{1} {0}",
                                "availableFormats";
                            {
                                "d";
                                "d",
                                    "E";
                                "ccc",
                                    "Ed";
                                "E، d",
                                    "Ehm";
                                "E h:mm a",
                                    "EHm";
                                "E HH:mm",
                                    "Ehms";
                                "E h:mm:ss a",
                                    "EHms";
                                "E HH:mm:ss",
                                    "Gy";
                                "y G",
                                    "GyMMM";
                                "MMM y G",
                                    "GyMMMd";
                                "d MMM، y G",
                                    "GyMMMEd";
                                "E، d MMM، y G",
                                    "h";
                                "h a",
                                    "H";
                                "HH",
                                    "hm";
                                "h:mm a",
                                    "Hm";
                                "HH:mm",
                                    "hms";
                                "h:mm:ss a",
                                    "Hms";
                                "HH:mm:ss",
                                    "hmsv";
                                "h:mm:ss a v",
                                    "Hmsv";
                                "HH:mm:ss v",
                                    "hmv";
                                "h:mm a v",
                                    "Hmv";
                                "HH:mm v",
                                    "M";
                                "L",
                                    "Md";
                                "d/‏M",
                                    "MEd";
                                "E، d/M",
                                    "MMdd";
                                "dd‏/MM",
                                    "MMM";
                                "LLL",
                                    "MMMd";
                                "d MMM",
                                    "MMMEd";
                                "E، d MMM",
                                    "MMMMd";
                                "d MMMM",
                                    "MMMMEd";
                                "E، d MMMM",
                                    "MMMMW";
                                "الأسبوع W من MMM",
                                    "MMMMW";
                                "الأسبوع W من MMM",
                                    "MMMMW";
                                "الأسبوع W من MMM",
                                    "MMMMW";
                                "الأسبوع W من MMM",
                                    "MMMMW";
                                "الأسبوع W من MMM",
                                    "MMMMW";
                                "الأسبوع W من MMM",
                                    "ms";
                                "mm:ss",
                                    "y";
                                "y",
                                    "yM";
                                "M‏/y",
                                    "yMd";
                                "d‏/M‏/y",
                                    "yMEd";
                                "E، d/‏M/‏y",
                                    "yMM";
                                "MM‏/y",
                                    "yMMM";
                                "MMM y",
                                    "yMMMd";
                                "d MMM، y",
                                    "yMMMEd";
                                "E، d MMM، y",
                                    "yMMMM";
                                "MMMM y",
                                    "yQQQ";
                                "QQQ y",
                                    "yQQQQ";
                                "QQQQ y",
                                    "yw";
                                "الأسبوع w من سنة y",
                                    "yw";
                                "الأسبوع w من سنة y",
                                    "yw";
                                "الأسبوع w من سنة y",
                                    "yw";
                                "الأسبوع w من سنة y",
                                    "yw";
                                "الأسبوع w من سنة y",
                                    "yw";
                                "الأسبوع w من سنة y";
                            }
                            "appendItems";
                            {
                                "Day";
                                "{0} ({2}: {1})",
                                    "Day-Of-Week";
                                "{0} {1}",
                                    "Era";
                                "{1} {0}",
                                    "Hour";
                                "{0} ({2}: {1})",
                                    "Minute";
                                "{0} ({2}: {1})",
                                    "Month";
                                "{0} ({2}: {1})",
                                    "Quarter";
                                "{0} ({2}: {1})",
                                    "Second";
                                "{0} ({2}: {1})",
                                    "Timezone";
                                "{0} {1}",
                                    "Week";
                                "{0} ({2}: {1})",
                                    "Year";
                                "{1} {0}";
                            }
                            "intervalFormats";
                            {
                                "intervalFormatFallback";
                                "{0} – {1}",
                                    "d";
                                {
                                    "d";
                                    "d–d";
                                }
                                "h";
                                {
                                    "a";
                                    "h a – h a",
                                        "h";
                                    "h–h a";
                                }
                                "H";
                                {
                                    "H";
                                    "HH–HH";
                                }
                                "hm";
                                {
                                    "a";
                                    "h:mm a – h:mm a",
                                        "h";
                                    "h:mm–h:mm a",
                                        "m";
                                    "h:mm–h:mm a";
                                }
                                "Hm";
                                {
                                    "H";
                                    "HH:mm–HH:mm",
                                        "m";
                                    "HH:mm–HH:mm";
                                }
                                "hmv";
                                {
                                    "a";
                                    "h:mm a – h:mm a v",
                                        "h";
                                    "h:mm–h:mm a v",
                                        "m";
                                    "h:mm–h:mm a v";
                                }
                                "Hmv";
                                {
                                    "H";
                                    "HH:mm–HH:mm v",
                                        "m";
                                    "HH:mm–HH:mm v";
                                }
                                "hv";
                                {
                                    "a";
                                    "h a – h a v",
                                        "h";
                                    "h–h a v";
                                }
                                "Hv";
                                {
                                    "H";
                                    "HH–HH v";
                                }
                                "M";
                                {
                                    "M";
                                    "M–M";
                                }
                                "Md";
                                {
                                    "d";
                                    "M/d – M/d",
                                        "M";
                                    "M/d – M/d";
                                }
                                "MEd";
                                {
                                    "d";
                                    "E، d/‏M –‏ E، d/‏M",
                                        "M";
                                    "E، d/‏M – E، d/‏M";
                                }
                                "MMM";
                                {
                                    "M";
                                    "MMM–MMM";
                                }
                                "MMMd";
                                {
                                    "d";
                                    "d–d MMM",
                                        "M";
                                    "d MMM – d MMM";
                                }
                                "MMMEd";
                                {
                                    "d";
                                    "E، d – E، d MMM",
                                        "M";
                                    "E، d MMM – E، d MMM";
                                }
                                "MMMM";
                                {
                                    "M";
                                    "LLLL–LLLL";
                                }
                                "y";
                                {
                                    "y";
                                    "y–y";
                                }
                                "yM";
                                {
                                    "M";
                                    "M‏/y – M‏/y",
                                        "y";
                                    "M‏/y – M‏/y";
                                }
                                "yMd";
                                {
                                    "d";
                                    "d‏/M‏/y – d‏/M‏/y",
                                        "M";
                                    "d‏/M‏/y – d‏/M‏/y",
                                        "y";
                                    "d‏/M‏/y – d‏/M‏/y";
                                }
                                "yMEd";
                                {
                                    "d";
                                    "E، dd‏/MM‏/y – E، dd‏/MM‏/y",
                                        "M";
                                    "E، d‏/M‏/y – E، d‏/M‏/y",
                                        "y";
                                    "E، d‏/M‏/y – E، d‏/M‏/y";
                                }
                                "yMMM";
                                {
                                    "M";
                                    "MMM – MMM، y",
                                        "y";
                                    "MMM، y – MMM، y";
                                }
                                "yMMMd";
                                {
                                    "d";
                                    "d–d MMM، y",
                                        "M";
                                    "d MMM – d MMM، y",
                                        "y";
                                    "d MMM، y – d MMM، y";
                                }
                                "yMMMEd";
                                {
                                    "d";
                                    "E، d – E، d MMM، y",
                                        "M";
                                    "E، d MMM – E، d MMM، y",
                                        "y";
                                    "E، d MMM، y – E، d MMM، y";
                                }
                                "yMMMM";
                                {
                                    "M";
                                    "MMMM – MMMM، y",
                                        "y";
                                    "MMMM، y – MMMM، y";
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}