Buttons

Updated on Sep 8, 2026

Starting with Kendo UI R2 R2024, the DateRangePicker exposes two buttons. Below you will find additional information about their functionality and how to enable them.

Calendar Button

The calendarButton changes the opening behavior of the DateRangePicker. By default, the component opens when you click the input fields. When calendarButton is set to true, the DateRangePicker opens when you click the calendar icon located next to the input fields.

Example

View Source

    <div id="daterangepicker"></div>
    <script>
        $("#daterangepicker").kendoDateRangePicker({
            calendarButton:true
        });
    </script>

Clear Button

The clearButton allows you to clear the selected range. The example below shows how to enable the button.

Example

View Source

    <div id="daterangepicker"></div>
    <script>
        $("#daterangepicker").kendoDateRangePicker({
            clearButton:true
        });
    </script>

See Also

• Buttons Demo of the DateRangePicker
• JavaScript API Reference of the DateRangePicker