Available in the OSS Version

Editors - Localizing Editors

English, United States (en-US)

Japan (ja)

Tamil, India (ta)

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

In this sample, a culture is set to the editors' regional option to change the format of dates, times, and currencies. Three regions are configured here and there are many more to choose from in the infragistics.ui.regional-i18n.js file.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
    <style>
        @media all and (max-width: 360px) {
            .ui-datepicker {
                width: 250px;
            }
        }
    </style>
</head>
<body>
    <div class="editors">
        <h4>English, United States (en-US)</h4>
        <div id="enUsDatePicker"></div>
        <div id="enUsTimeEditor"></div>
        <div id="enUsCurrencyEditor"></div>

        <h4>Japan (ja)</h4>
        <div id="jaDatePicker"></div>
        <div id="jaTimeEditor"></div>
        <div id="jaCurrencyEditor"></div>

        <h4>Tamil, India (ta)</h4>
        <div id="taDatePicker"></div>
        <div id="taTimeEditor"></div>
        <div id="taCurrencyEditor"></div>
    </div>

    <!-- JavaScript files containing all needed regional settings -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/i18n/regional/infragistics.ui.regional-en.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/i18n/regional/infragistics.ui.regional-ja.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/i18n/regional/infragistics.ui.regional-ta.js"></script>

    <script>

        $(function () {

            // --------- en-US ----------
            $("#enUsDatePicker").igDatePicker({
                width: "260px",
                value: new Date(),
                readOnly: true,
                dropDownOnReadOnly: true,
                dateDisplayFormat: "dateLong",
                regional: "en-US"
            });

            $("#enUsTimeEditor").igDateEditor({
                width: 100,
                value: new Date(),
                dateInputFormat: "timeLong",
                dateDisplayFormat: "timeLong",
                regional: "en-US"
            });

            $("#enUsCurrencyEditor").igCurrencyEditor({
                width: 100,
                value: 86753.09,
                regional: "en-US"
            }); // ----- END en-US -----


            // --------- ja ----------
            $("#jaDatePicker").igDatePicker({
                width: "260px",
                value: new Date(),
                readOnly: true,
                dropDownOnReadOnly: true,
                dateDisplayFormat: "dateLong",
                regional: "ja"
            });

            $("#jaTimeEditor").igDateEditor({
                width: 100,
                value: new Date(),
                dateInputFormat: "timeLong",
                dateDisplayFormat: "timeLong",
                regional: "ja"
            });

            $("#jaCurrencyEditor").igCurrencyEditor({
                width: 100,
                value: 86753.09,
                regional: "ja"
            }); // ----- END ja -----

            // --------- ta ----------
            $("#taDatePicker").igDatePicker({
                width: "260px",
                value: new Date(),
                readOnly: true,
                dropDownOnReadOnly: true,
                dateDisplayFormat: "dateLong",
                regional: "ta"
            });

            $("#taTimeEditor").igDateEditor({
                width: 100,
                value: new Date(),
                dateInputFormat: "timeLong",
                dateDisplayFormat: "timeLong",
                regional: "ta"
            });

            $("#taCurrencyEditor").igCurrencyEditor({
                width: 100,
                value: 86753.09,
                regional: "ta"
            }); // ----- END ta -----

        });

    </script>

</body>
</html>