New to Kendo UI for jQuery? Start a free 30-day trial
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.
html
<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>