Getting Started with the DateRangePicker
This guide demonstrates how to get up and running with the Kendo UI for jQuery DateRangePicker.
After the completion of this guide, you will be able to achieve the following end result:
<div id="daterangepicker" title="daterangepicker"></div>
<script>
// create DateRangePicker from div HTML element
$("#daterangepicker").kendoDateRangePicker({
value: new Date(),
min: new Date(2023, 0, 1),
max: new Date(2023, 0, 25),
format: "yyyy-MM-dd"
});
</script>
1. Create an Empty Div Element
First, create an empty <div> element on the page from which the DateRangePicker component will be initialized.
<div id="daterangepicker" title="daterangepicker"></div>
2. Initialize the DateRangePicker
In this step, you will initialize the DateRangePicker from the <div> element. When you initialize the component, all settings of the DateRangePicker will be provided in the script statement. You have to describe its layout, configuration, and event handlers in JavaScript.
<div id="daterangepicker" title="daterangepicker"></div>
<script>
// Target the div element by using jQuery and then call the kendoDateRangePicker() method.
$("#daterangepicker").kendoDateRangePicker({
// Add some basic configuration.
value: new Date()
});
</script>
Once the basic initialization is completed, you can start adding additional configurations to the DateRangePicker.
3. Set the Minimum and Maximum Date
To limit the range of the displayed dates in the DateRangePicker, use the supported min and max options.
<div id="daterangepicker" title="daterangepicker"></div>
<script>
$("#daterangepicker").kendoDateRangePicker({
value: new Date(),
min: new Date(2023, 0, 1),
max: new Date(2023, 0, 25)
});
</script>
4. Set the Format
You can customize the format of the displayed date by setting the format configuration of the DateRangePicker.
<div id="daterangepicker" title="daterangepicker"></div>
<script>
$("#daterangepicker").kendoDateRangePicker({
value: new Date(),
min: new Date(2023, 0, 1),
max: new Date(2023, 0, 25),
format: "yyyy-MM-dd"
});
</script>