如何禁用过去的日期而不将它们隐藏在剑道日期选择器中？答案

【问题标题】：How to disable past dates without hiding them in Kendo date picker?如何禁用过去的日期而不将它们隐藏在剑道日期选择器中？
【发布时间】：2014-10-21 10:32:50
【问题描述】：

如果我为日期选择器设置最小值，它不会在打开时显示小于最小日期的日期。

我的要求是日期选择器中应显示小于最小日期的日期，但应禁用它们。

【问题讨论】：

标签： kendo-ui datepicker

【解决方案1】：

您可以使用 CSS 样式并在 Kendo 日期选择器中使用自定义内容。

HTML：

<input id="datepicker" style="width:150px;" />

CSS：

.disabledDay { 
    display: block;
    overflow: hidden;
    min-height: 22px;
    line-height: 22px;
    padding: 0 .45em 0 .1em;
    cursor:default;
    opacity: 0.5;
}

JavaScript：

$(document).ready(function() {

disabledDaysBefore = [
  +new Date("10/20/2014")
];

var p = $("#datepicker").kendoDatePicker({
      value: new Date(),
      dates: disabledDaysBefore,
      month: {
          content: '# if (data.date < data.dates) { #' +    
          '<div class="disabledDay">#= data.value #</div>' +
          '# } else { #' +
          '#= data.value #' +
          '# } #'
      },
      open: function(e){
          $(".disabledDay").parent().removeClass("k-link")
          $(".disabledDay").parent().removeAttr("href")
      },
     }).data("kendoDatePicker");

});

查看演示： JSFIDDLE

【讨论】：

+1 很好的答案。但用户仍然可以通过手动/键盘输入选择那些禁用的日期:)
也可以通过$("a.k-link:has('.disabledDay')").removeClass("k-link").removeAttr("href");缩小打开事件代码

【解决方案2】：

这一切归功于 devlero，如果有人想使用它，我可以将它转换为 Razor 语法。

@(Html.Kendo().DatePicker()
          .Name("datepicker")
          .Value(DateTime.Today)
          .Events(e => e.Open("onOpen"))
          .MonthTemplate("# if (data.date < disabledDaysBefore) { #" +
                                "<div class='disabledDay'>#= data.value #</div>" +
                             "# } else { #" +
                "#= data.value #" +
                "# } #")
          .HtmlAttributes(new { style = "width: 150px;" })      
    )


 $(document).ready(function () {                         
        disabledDaysBefore = [
          +new Date("10/20/2014")
        ];      
    });

function onOpen() {
            $(".disabledDay").parent().removeClass("k-link")
            $(".disabledDay").parent().removeAttr("href")
        }

【讨论】：

也可以通过$("a.k-link:has('.disabledDay')").removeClass("k-link").removeAttr("href");缩小onOpen函数代码