Include Clear Button In DatePicker's Footer Template
Environment
| Product Version | 2020.1.219 |
| Product | Progress® Kendo UI® Date and Time Pickers for jQuery |
Description
How can I add a clear button to the footer of a Kendo UI DatePicker?
Solution
The clear button can be appended to the Kendo UI DatePicker's footer during the Open event.
function onOpen(e) {
//Get the opened DatePicker's footer
var footer = $(e.sender.dateView.popup)[0].element.find(".k-footer");
//If the button doesn't exist, create it, and append it to the footer.
if (footer.find(".k-button").length == 0) {
var btn = $('<a/>');
btn.addClass('k-button');
btn.text('Clear');
btn.on('click', function () {
e.sender.value(null);
e.sender.close();
});
footer.append(btn);
}
}
Example
<input id="datepicker" />
<input id="datepicker2" />
<script>
$("#datepicker").kendoDatePicker({
open: onOpen,
});
$("#datepicker2").kendoDatePicker({
open: onOpen,
});
function onOpen(e) {
//Get the opened DatePicker's footer
var footer = $(e.sender.dateView.popup)[0].element.find(".k-footer");
//If the button doesn't exist, create it, and append it to the footer.
if (footer.find(".k-button").length == 0) {
var btn = $('<a/>');
btn.addClass('k-button');
btn.text('Clear');
btn.on('click', function () {
e.sender.value(null);
e.sender.close();
});
footer.append(btn);
}
}
</script>