Selected Dates

The DateRangePicker allows you to define the minimum and maximum dates it displays and also render a pre-selected date range.

The following example demonstrates how to render a DateRangePicker with an initially selected range and defined min and max dates. The DateRangePicker sets the range only if the entered date is valid and within min and max values.

<div id="daterangepicker"></div>

<script>
    $(document).ready(function(){
        var currentDate = new Date();
        var start = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + 2);
        var end = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + 20);
        var max = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + 60);

        $("#daterangepicker").kendoDateRangePicker({
            range: [start, end],
            min: new Date(),
            max: max
        })
    });
</script>

See Also

In this article
Not finding the help you need? Improve this article