jquery - 在 Kendo Datepicker 中使日期不可选择或不可单击

Question

有没有办法让 Kendo Datepicker 中的数组中的日期变得不可选择？

在模板中，我将它们设置为不可见，但我希望它们可见且不可选择。

Razor :

<div>
@(Html.Kendo().DatePicker()
      .Name("datepicker")
      .Value(DateTime.Today)
      .MonthTemplate("# if ($.inArray(+data.date, birthdays) != -1) { #" +
                         "<div style=\"display:none;\">#= data.value #</div>" +
                     "# } else {#" +
                     "#= data.value #" +
                     "# } #")
)
</div>

脚本:

<script>
var today = new Date(),
    birthdays = [
        +new Date(today.getFullYear(), today.getMonth(), 11),
        +new Date(today.getFullYear(), today.getMonth() + 1, 6),
        +new Date(today.getFullYear(), today.getMonth() + 1, 27),
        +new Date(today.getFullYear(), today.getMonth() - 1, 3),
        +new Date(today.getFullYear(), today.getMonth() - 2, 22)
    ];
</script>

Answer 1

实际上，我偶然发现了 upon an answer，它让我走上了正轨，所以我将回答我自己的问题，以防有人面临同样的问题。

已编辑:正如 @CSharper 的评论中所述，他在另一个线程中的回答非常相似。因此我也要去 link to his answer。

我创建了一个样式类以使日期显示为禁用状态。

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

我在选择器上注册了一个 onOpen 事件，并在元素上添加了一个类

<div>
    @(Html.Kendo().DatePicker()
          .Name("datepicker")
          .Value(DateTime.Today)
          .Events(e => e.Open("onDateOpen"))
          .MonthTemplate("# if ($.inArray(+data.date, birthdays) != -1) { #" +
                     "<div class=\"disabledDay\">#= data.value #</div>" +
                 "# } else {#" +
                 "#= data.value #" +
                 "# } #")
    )
</div>

然后我创建了一个通过 open-event 禁用链接本身的函数

<script>
    var today = new Date(),
        birthdays = [
            +new Date(today.getFullYear(), today.getMonth(), 11),
            +new Date(today.getFullYear(), today.getMonth() + 1, 6),
            +new Date(today.getFullYear(), today.getMonth() + 1, 27),
            +new Date(today.getFullYear(), today.getMonth() - 1, 3),
            +new Date(today.getFullYear(), today.getMonth() - 2, 22)
        ];

    function onDateOpen(e) {
        //removing this class makes the day unselectable
        $(".disabledDay").parent().removeClass("k-link"); 
        //this removes the hyperlink styling
        $(".disabledDay").parent().removeAttr("href"); 
    };
</script>

瞧!:)