DateRangePicker Overview

The Kendo UI DateRangePicker widget allows the user to select date range from a calendar or through a direct input.

The DateRangePicker also supports custom templates for its month view, configuration options for minimum and maximum dates, a start view, and depth for navigation.

Getting Started

Initialize the DateRangePicker

To initialize the DateRangePicker, use the following example.

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

<script>
    $(document).ready(function(){
        $("#daterangepicker").kendoDateRangePicker();
    });
</script>

Configuration

The DateRangePicker provides configuration options that can be set during initialization. The available properties are:

  • Selected range
  • Minimum and/or maximum date
  • Format definition
  • Start view

The first day of the week in the Calendar view depends on the applied culture.

Range, Min, and Max Dates

The following example demonstrates how to create a DateRangePicker with a selected date and a defined minimum and maximum dates.

Example
<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>

Note that the DateRangePicker sets the range only if the entered date is valid and within min and max values.

Start View and Navigation Depth

Define the first rendered view with the start option. Control the navigation depth with the depth option. The following views are predefined:

  • month—Shows the days of the month.
  • year—Shows the months of the year.
  • decade—Shows the years of the decade.
  • century—Shows the decades of the century.

In order to be able to select dates for the range you need to set the depth to month.

Disable Dates

The DateRangePicker enables you to disable certain days, such as weekends, national holidays, and others, which are not intended to be selected by the end user.

To disable a date, either:

  • Set and array of dates, or
  • Add a function to determine the return value as the date that is disabled.

Set an Array

When you disable dates by setting an array, list the days that need to be disabled by using the first letters from their names in English.

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

    <script>
        var start = new Date();
        var end = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 10);
        $("#daterangepicker").kendoDateRangePicker({
            range: [start, end],
            disableDates: ["we", "th"],
        });
    </script>

Add a Function

When you disable dates by adding a function, determine its return value as true for the date that is disabled.

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

    <script>
        $("#daterangepicker").kendoDateRangePicker({
            disableDates: function (date) {
                var disabled = [13,14,20,21];
                if (date && disabled.indexOf(date.getDate()) > -1 ) {
                    return true;
                } else {
                    return false;
                }
            }
        });
    </script>

Calendar Types

The DateRangePicker works with the JavaScript Date objects that support only the Gregorian calendar. This means that the widget does not support other calendar types.

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

    <script>
        $("#daterangepicker").kendoDateRangePicker({
            disableDates: function (date) {
                var disabled = [13,14,20,21];
                if (date && disabled.indexOf(date.getDate()) > -1 ) {
                    return true;
                } else {
                    return false;
                }
            }
        });
    </script>

See Also

Other articles on the Kendo UI DateRangePicker:

Articles on the Kendo UI Calendar:

Articles on the Kendo UI DateTimePicker:

Articles on the Kendo UI TimePicker:

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