jube-fork/Jube.App/wwwroot/kendo/examples/dateinput/localization-globalization.html

<!DOCTYPE html>
<html>
<head>
    <title>Localization and Globalization</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
        <script src="../content/web/globalization/cultures/kendo.culture.en-US.js"></script>
    <script src="../content/web/globalization/cultures/kendo.culture.en-GB.js"></script>
    <script src="../content/web/globalization/cultures/kendo.culture.de-DE.js"></script>
    <script src="../content/web/globalization/cultures/kendo.culture.fr-FR.js"></script>
    <script src="../content/web/globalization/cultures/kendo.culture.bg-BG.js"></script>

    <div id="example">
        <div class="demo-section k-content">
            <ul class="fieldlist">
                <li class="culture">
                    <label for="culture">Choose culture:</label>
                    <input id="culture" value="en-US" style="width: 100%;"/>
                </li>
                <li class="language">
                    <label for="language">Choose language:</label>
                    <input id="language" value="en-US" style="width: 100%;"/>
                </li>
            </ul>
        </div>
        
        <div id="product-view" class="demo-section k-content">
            <h4>Enter a date</h4>
            <input id="dateinput" style="width: 100%" />
        </div>

        <style>
            .fieldlist {
                margin: 0 0 -1em;
                padding: 0;
            }
    
            .fieldlist li {
                list-style: none;
                padding-bottom: 1em;
                line-height: 3em;
            }
    
            .fieldlist label {
                display: block;
                font-weight: bold;
                text-transform: uppercase;
                font-size: 12px;
            }
        </style>

        <script>
            function createDateInput() {
                var element = $("#dateinput");
                if (element.data("kendoDateInput")) {
                    element.data("kendoDateInput").destroy();
                    element.empty();
                    element = $('<input id="dateinput" style="width: 100%" />');
                    element.appendTo($("#product-view").empty());
                }
                element.kendoDateInput({
                    format: "F" ,
                    value:new Date()
                });            
            }

            function changeCulture() {
                kendo.culture(this.value());

                $("#dateinput").data("kendoDateInput").setOptions(
                    {
                    format: kendo.culture().calendar.patterns.F
                    });
            }
            
            function changeLanguage() {
                kendo.ui.progress($("#dateinput"), true);                
                var baseUrl = '../content/web/globalization/messages/kendo.messages.';
                $.getScript(baseUrl + this.value() + ".js", function () {
                    kendo.ui.progress($("#dateinput"), false);
                    createDateInput();
                });
            }

            $(document).ready(function() {
                createDateInput();

                $("#culture").kendoDropDownList({
                    change: changeCulture,
                    dataTextField: "text",
                    dataValueField: "value",
                    dataSource: [
                        {text: "bg-BG", value: "bg-BG"},
                        {text: "de-DE", value: "de-DE"},
                        {text: "en-US", value: "en-US"},
                        {text: "en-GB", value: "en-GB"}
                    ]
                });

                $("#language").kendoDropDownList({
                    change: changeLanguage,
                    dataTextField: "text",
                    dataValueField: "value",
                    dataSource: [
                        {text: "English", value: "en-US"},
                        {text: "Bulgarian", value: "bg-BG"}
                    ]
                });
            });
        </script>
    </div>


    
</body>
</html>