Kendo ui 如何禁用过去的日期而不将其隐藏在剑道日期选择器中？

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

---

我的要求是，日期选择器中应显示小于min date的日期，但应禁用这些日期。

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

HTML:

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");

});

$（文档）.ready（函数（）{
disabledDaysBefore=[
+新日期（“2014年10月20日”）
];
var p=$（“#日期选择器”）.kendoDatePicker({
值：新日期（），
日期：disabledDaysBefore，
月份：{
内容：“#如果（data.date

请参见演示：

---

这一点要归功于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")
        }  

@（Html.Kendo（）.DatePicker（））
.Name（“日期选择器”）
.Value（DateTime.Today）
.Events（e=>e.Open（“onOpen”））
.MonthTemplate（“#如果（data.date

+1，答案很好。但用户仍然可以通过手动/键盘输入选择那些禁用的日期：）您还可以通过

$（“a.k-link:has（'.disabledDay'））缩小打开的事件代码。removeClass（“k-link”）.removeAttr（“href”）

您还可以通过

$（.k-link:has（'.disabledDay'））缩小onOpen函数代码。removeClass（“k-link”）。removeAttr（“href”）
$(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");

});

@(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")
        }