Globalization.cshtml

@using Syncfusion.EJ2

@section ControlsSection{
    <div class=" col-lg-8 control-section">
        <div class="timepicker-section">
            <div id="wrapper" class="timepicker-control">
                <div class="tabs-wrap">
                    <div class="wrap">
                        <ejs-timepicker id="timepicker" placeholder="Select Time"></ejs-timepicker>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 property-section">
        <div class="radio-control" id="property" title="Select a Locale">
            <div class="row">
                <ejs-radiobutton id="en" name="locale" label="English" value="en" change="cultureChange"></ejs-radiobutton>
            </div>
            <div class="row">
                <ejs-radiobutton id="de" name="locale" label="German" value="de" change="cultureChange" checked="true"></ejs-radiobutton>
            </div>
            <div class="row">
                <ejs-radiobutton id="ar" name="locale" label="Arabic" value="ar" change="cultureChange"></ejs-radiobutton>
            </div>
        </div>
    </div>
}

<script>
    document.addEventListener('DOMContentLoaded', function () {
        timepicker = document.getElementById('timepicker').ej2_instances[0];
        var L10n = ej.base.L10n;
        L10n.load({
            'de': {
                'timepicker': { placeholder: 'Wählen Sie Zeit' }
            },
            'zh': {
                'timepicker': { placeholder: '選擇時間' }
            },
            'vi': {
                'timepicker': { placeholder: 'Chọn thời gian' }
            },
            'en': {
                'timepicker': { placeholder: 'Select Time' }
            },
            'ar': {
                'timepicker': { placeholder: 'حدد الوقت' }
            }
        });
        loadCultureFiles('de');
        timepicker.locale = 'de';
    });

    function cultureChange(args) {
        var culture = args.value;
        timepicker.locale = culture;
        if (culture !== 'en') {
            loadCultureFiles(culture);
        }
        timepicker.enableRtl = (timepicker.locale === 'ar');
    }

    function loadCultureFiles(name) {
        var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json'];
        if (name === 'ar') {
            files.push('numberingSystems.json');
        }
        var loader = ej.base.loadCldr;
        var loadCulture = function (prop) {
            var val, ajax;
            if (name === 'ar' && prop === files.length - 1) {
                ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../scripts/cldr-data/supplemental/' + files[prop], 'GET', false);
            } else {
                ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false);
            }
            ajax.onSuccess = function (value) {
                val = value;
            };
            ajax.send();
            loader(JSON.parse(val));
        };
        for (var prop = 0; prop < files.length; prop++) {
            loadCulture(prop);
        }
    }

</script>

@*custom code start*@
<style>
    #wrapper {
        max-width: 246px;
        margin: 30px auto;
        padding-top: 20px;
    }

    .property-section {
        width: 200px;
    }
</style>

@*custom code end*@

@section ActionDescription{
    <div id="action-description">
        <p>
            In this sample, the TimePicker has been configured with
            <code>German</code> culture. To change this current culture, go to the properties panel at the right side and select a culture from
           available options. For mobile mode touch the icon at the right side and select a culture from the available options.
        </p>
    </div>

}

@section Description{
    <div id="description">
        <p>
            TimePicker component was rendered with
            <code>German</code> culture. Here, the time separator and time format are specific to the current culture.
        </p>
        <p>
            You can also change the component culture by selecting it from the culture options in the properties panel.
        </p>
        <p>
            More information on the globalization and it's configuration can be found in the
            <a href="https://ej2.syncfusion.com/aspnetcore/documentation/base/intl.html" target="_blank"> documentation section</a>.
        </p>
    </div>


}