从页脚清除 Kendo 日期选择器输入字段

Question

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

谢谢

我当前的代码：

<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

目前无法测试，但您可能需要这样的东西，使用 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>

Answer 2

我可以使用这里的 "remove link" 示例来做到这一点：

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>

从页脚清除 Kendo 日期选择器输入字段

Clearing the Kendo Datepicker input field from the footer

javascript

jquery

datepicker

kendo-ui