在 Kendo MVC DatePicker 中添加按钮答案

【问题标题】：Add button inside Kendo MVC DatePicker在 Kendo MVC DatePicker 中添加按钮
【发布时间】：2016-11-11 08:03:32
【问题描述】：

我有一个如下所示的 Kendo MVC DatePicker，它将呈现为一个文本框，其中有一个按钮（带有日历图标），可以触发日期选择器 UI。

在我的场景中，我需要在日历按钮的左侧插入一个按钮来清除文本框的值。

我的问题是，是否有可能（以及如何）在呈现的文本框中插入另一个自定义按钮？

 <div class="col-md-2 ">
  
   @(Html.Kendo().DatePicker()
   .Name("InspecitonDate")
   .Value(DateTime.Now.AddMonths(-3)).Format("dd/MM/yyyy")
   .HtmlAttributes(new { style = "width: 100%" })
   )
                    
</div>

【问题讨论】：

标签： asp.net-mvc html kendo-ui kendo-asp.net-mvc

【解决方案1】：

Kendo 日期选择器添加属性 data-role，因此通过 jQuery 在页面上选择所有控件，属性 data-role = datepicker

<script>
$(document).ready(function () {
    var dt = $("[data-role='datepicker']");

//For each control insert an icon button calling js function clearDate to clear date input 
$.each(dt,
    function (i, d) {
        $("#" + d.id).before("<span class='fa fa-times' onclick=\"clearDate('" + d.id + "')\"></span>");
    });
});

function clearDate(inputId) {
    $("#"+inputId).data("kendoDatePicker").value(null);
}

我建议将这段代码写在一些通用的 js 文件中，以便可以更改每个页面中的所有剑道日期控件。您也可以添加一些样式来将图标向右移动

.k-picker-wrap > span.fa-times {
position: absolute;
right: 35px;
top: 8px;
color:#01ace4;
cursor: pointer;
}

【讨论】：

【解决方案2】：

没有这样的内置选项，所以你需要自己做。所以你需要appenddocument.ready上需要的额外按钮

【讨论】：