如何禁用过去的日期而不会将其隐藏在Kendo日期选择器中？ [英] How to disable past dates without hiding them in Kendo date picker?

问题描述

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

If I set min value for the date picker, it does not display dates less than min date when it's opened.

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

My requirement is that dates less than min date should be shown in the date picker, but they should be disabled.

推荐答案

您可以使用CSS样式并使用自定义内容在Kendo datepicker。

You can make it with CSS styles and using custom content in 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：

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

See demo: JSFIDDLE

这篇关于如何禁用过去的日期而不会将其隐藏在Kendo日期选择器中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！