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

<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</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>
                </ul>
            </div>
            
            <div id="product-view" class="demo-section k-content">
                <ul class="fieldlist">
                    <li>
                        <label for="startDate">Discount start date:</label>
                        <input id="startDate" />
                        <input id="startTime" value="12:00 AM" />
                    </li>
                    <li>
                        <label for="endDate">Discount end date:</label>
                        <input id="endDate" />
                        <input id="endTime" value="12:00 AM" />
                    </li>
                    <li>
                        <label for="initial">Initial price:</label>
                        <input id="initial" value="10" min="1"/>
                    </li>
                    <li>
                        <label for="discount">Discount:</label>
                        <input id="discount" value="0.05" min="0" max="0.5" step="0.01"/>
                    </li>
                </ul>
            </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;
                    color: #444;
                }
            </style>

            <script>
                $(document).ready(function() {
                    function startDateChange() {
                        var date = startDate.value();

                        if (date) {
                            date = new Date(date);
                            date.setDate(date.getDate() + 1);
                            endDate.min(date);
                        }
                    }

                    function endDateChange() {
                        var date = endDate.value();

                        if (date) {
                            date = new Date(date);
                            date.setDate(date.getDate() - 1);
                            startDate.max(date);
                        }
                    }

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

                        var datePickerOptions = {
                            format: kendo.culture().calendar.patterns.d
                        };

                        var timePickerOptions = {
                            format: kendo.culture().calendar.patterns.t
                        };

                        startDate.setOptions(datePickerOptions);
                        endDate.setOptions(datePickerOptions);

                        startTime.setOptions(timePickerOptions);
                        endTime.setOptions(timePickerOptions);

                        initial.value(initial.value());
                        discount.value(discount.value());
                    }

                    var startDate = new kendo.ui.DatePicker($("#startDate"), { change: startDateChange });
                    var endDate = new kendo.ui.DatePicker($("#endDate"), { change: endDateChange });

                    var startTime = new kendo.ui.TimePicker($("#startTime"));
                    var endTime = new kendo.ui.TimePicker($("#endTime"));

                    var initial = new kendo.ui.NumericTextBox($("#initial"), { format: "c" });
                    var discount = new kendo.ui.NumericTextBox($("#discount"), { format: "p" });

                    var today = new Date();

                    startDate.value(today);
                    endDate.min(today);

                    today = new Date(today);
                    today.setDate(today.getDate() + 1);

                    endDate.value(today);
                    startDate.max(today);

                    $("#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"}
                        ]
                    });
                });
            </script>
        </div>


    
</body>
</html>