Question

有没有办法让Kendo Datepicker中的数组无法选择？

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

剃刀：

<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>

然后我创建了一个通过开放事件

禁用链接本身的函数

<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>

瞧！：）

在Kendo Datepicker中使一天无法选择或无法点击

1 个答案: