最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Clearing the Kendo Datepicker input field from the footer - Stack Overflow

programmeradmin1浏览0评论

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>
Share Improve this question asked May 13, 2015 at 0:00 JamsesJamses 511 gold badge1 silver badge6 bronze badges
Add a ment  | 

2 Answers 2

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>
发布评论

评论列表(0)

  1. 暂无评论