jube-fork/Jube.App/wwwroot/kendo/examples/datepicker/rangeselection.html

<!DOCTYPE html>
<html>
<head>
    <title>Range selection</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>
    
    
        <div id="example">
            <div class="box wide">
                <h4>Information</h4>
                <p>Range selecion is available as built-in functionality for the <strong>DateRangePicker</strong> component.</p>
                <br />
                <p>Check out the <a href="../daterangepicker/index">DateRangePicker examples</a>.</p>
            </div>
            <div class="demo-section k-content">

                <h4>Start date:</h4>
                <input id="start" style="width: 100%;" value="10/10/2011" />

                <h4 style="margin-top: 2em">End date:</h4>
                <input id="end" style="width: 100%;" value="10/10/2012"/>

            </div>
            <script>
                $(document).ready(function() {
                    function startChange() {
                        var startDate = start.value(),
                        endDate = end.value();

                        if (startDate) {
                            startDate = new Date(startDate);
                            startDate.setDate(startDate.getDate());
                            end.min(startDate);
                        } else if (endDate) {
                            start.max(new Date(endDate));
                        } else {
                            endDate = new Date();
                            start.max(endDate);
                            end.min(endDate);
                        }
                    }

                    function endChange() {
                        var endDate = end.value(),
                        startDate = start.value();

                        if (endDate) {
                            endDate = new Date(endDate);
                            endDate.setDate(endDate.getDate());
                            start.max(endDate);
                        } else if (startDate) {
                            end.min(new Date(startDate));
                        } else {
                            endDate = new Date();
                            start.max(endDate);
                            end.min(endDate);
                        }
                    }

                    var start = $("#start").kendoDatePicker({
                        change: startChange
                    }).data("kendoDatePicker");

                    var end = $("#end").kendoDatePicker({
                        change: endChange
                    }).data("kendoDatePicker");

                    start.max(end.value());
                    end.min(start.value());
                });
            </script>

        </div>


    
</body>
</html>