I'm trying to put a button in my Kendo Datepicker footer that can be used to clear the input field, but the Datepicker treats any text or button in the footer as a shortcut for the current date. Does anyone know how to override this behaviour?

Thanks

My current code:

<input id="datepicker" />

<script id="footer-template" type="text/x-kendo-template">
    <button id="myButton" onclick="myFunction" >Click Me!</button>
</script>
<script>
function myFunction() {
    document.getElementById("datepicker").value = '';
}

$("#datepicker").kendoDatePicker({
    footer: kendo.template($("#footer-template").html())
});
</script>

I'm trying to put a button in my Kendo Datepicker footer that can be used to clear the input field, but the Datepicker treats any text or button in the footer as a shortcut for the current date. Does anyone know how to override this behaviour?

Thanks

My current code:

<input id="datepicker" />

<script id="footer-template" type="text/x-kendo-template">
    <button id="myButton" onclick="myFunction" >Click Me!</button>
</script>
<script>
function myFunction() {
    document.getElementById("datepicker").value = '';
}

$("#datepicker").kendoDatePicker({
    footer: kendo.template($("#footer-template").html())
});
</script>

• javascript
• jquery
• kendo-ui
• datepicker

Share Improve this question Follow asked May 13, 2015 at 0:00 JamsesJamses 5111 gold badge11 silver badge66 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I was able to do this using the "remove link" example here:

http://www.telerik./forums/datepicker-custom-footer-without-link

My new code:

<input id="datepicker" />

<script id="footer-template" type="text/x-kendo-template">
    #=text#
</script>
<script>
$("#datepicker").kendoDatePicker().getKendoDatePicker().one("open", function(e) {
  var t = kendo.template($("#footer-template").html());
  var dp = this;
  setTimeout(function(){
    dp.dateView.popup.wrapper.find(".k-footer").append(t({text: "<button id=\"myButton\" onclick=\"myFunction()\" >Clear</button>"}));
  });
});

function myFunction() {
    $("#datepicker").data("kendoDatePicker").value(null);
}
</script>

Unable to test it at the moment, but you probably need something like this, using value() to set the new date:

<script>
    $("#myButton").on("click", function (e) {
        e.preventDefault();
        $("#datepicker").data("kendoDatePicker").value(null);
    });

    $("#datepicker").kendoDatePicker({
        footer: kendo.template($("#footer-template").html())
    });
</script>

<input id="datepicker" />

<script id="footer-template" type="text/x-kendo-template">
    <button id="myButton">Click Me!</button>
</script>