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

Question

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

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

Answer 1

您可以使用 CSS 样式并使用 Kendo datepicker 中的自定义内容来制作它。

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