如何禁用过去的日期而不将它们隐藏在 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.

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

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

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