Question

我正在尝试在我的Kendo Datepicker页脚中放置一个可用于清除输入字段的按钮，但Datepicker会将页脚中的任何文本或按钮视为当前日期的快捷方式。有谁知道如何覆盖这种行为？

由于

我目前的代码：

<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>

Answer 1

我可以使用此处的“删除链接”示例执行此操作：

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

我的新代码：

<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>

Answer 2

目前无法测试，但您可能需要使用value()来设置新日期：

<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>

从页脚清除Kendo Datepicker输入字段

2 个答案: