New to Kendo UI for jQuery? Start a free 30-day trial
Adding Buttons to Select Periods in Kendo UI DateRangePicker
Environment
Product | Progress® Kendo UI® DateRangePicker |
Version | 2025.2.520 |
Description
I want to add buttons within the Kendo UI DateRangePicker that allow users to select specific time periods, such as "Today", "Last 7 Days", or "This Month". However, the DateRangePicker does not provide built-in options for adding custom buttons or templates for this functionality.
This knowledge base article also answers the following questions:
- How can I customize the footer of Kendo UI DateRangePicker?
- How to add predefined date ranges in Kendo UI DateRangePicker?
- Can I add custom buttons to Kendo UI DateRangePicker?
Solution
To achieve the desired behavior, handle the open
event of the DateRangePicker only the first time it is fired. Use this event to append custom buttons to the footer using the .k-calendar-footer
class. Then, initialize the appended elements as buttons and implement custom logic for each.
Steps
- Use the
one
method to ensure theopen
event is handled only once. - Append custom button elements to the
.k-calendar-footer
container in the event handler. - Initialize the appended elements as Kendo UI buttons.
- Add functionality to each button to set predefined date ranges using the
range
method.
Example
<div class="k-d-flex k-justify-content-center" style="padding-top: 54px">
<div class="k-w-300">
<div id="daterangepicker" title="daterangepicker"></div>
</div>
</div>
<script>
$(document).ready(function () {
var dateRangePicker = $("#daterangepicker")
.kendoDateRangePicker({
calendarButton: true,
clearButton: true,
})
.data("kendoDateRangePicker");
dateRangePicker.one("open", function () {
$(".k-calendar-footer").append(
'<button id="todayBtn">Today</button><button id="last7Btn">Last 7 Days</button><button id="thisMonthBtn">This Month</button>',
);
$("#todayBtn").kendoButton({
themeColor: "success",
click: function () {
var today = new Date();
dateRangePicker.range({ start: today, end: today });
},
});
$("#last7Btn").kendoButton({
themeColor: "warning",
click: function () {
var end = new Date();
var start = new Date();
start.setDate(end.getDate() - 6);
dateRangePicker.range({ start: start, end: end });
},
});
$("#thisMonthBtn").kendoButton({
themeColor: "primary",
click: function () {
var start = new Date(
new Date().getFullYear(),
new Date().getMonth(),
1,
);
var end = new Date(
new Date().getFullYear(),
new Date().getMonth() + 1,
0,
);
dateRangePicker.range({ start: start, end: end });
},
});
});
});
</script>
Notes
- The
.k-calendar-footer
class is used to target the footer section of the DateRangePicker popup. - The
range
method sets the selected date range programmatically.