Question

此问题与：How to disable past dates without hiding them in Kendo date picker?有关。这是我的HTML标记：

 <input kendo-date-picker id="datepicker" ng-model="dateString" k-options="dateOptions" k-ng-model="dateObject"
               style="width: 100%;" />

在我的控制器中我有这个：

var disabledDaysAfter = [
      +new Date()
];
$scope.dateOptions = {
    dates: disabledDaysAfter,
    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")
    }
};

并在CSS中：

.disabledDay {
    display: block;
    overflow: hidden;
    min-height: 22px;
    line-height: 22px;
    padding: 0 .45em 0 .1em;
    cursor: default;
    color: #999;
}

然而，即使在href删除后，我也可以点击并选择任何未来。我该如何解决？渲染的标记将如下所示：

<td class="k-state-focused" id="02dd61ed-b4f2-494f-8238-e76da5b51346_cell_selected" role="gridcell" aria-selected="true" aria-label="Current focused date is Thursday, January 12, 2017">
    <a tabindex="-1" title="Thursday, January 12, 2017" data-value="2017/0/12">
        <div class="disabledDay">12</div>
    </a>
</td>

Answer 1

实际上它比我刚想的要简单得多。您可以使用选择器的disableDates配置：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>

<input id="datetimepicker" />
<script>
$("#datetimepicker").kendoDatePicker({
    value: new Date(),
    disableDates: function (date) {
        return date > new Date();
    }
});
</script>
</body>
</html>

禁用Kendo Angular DatePicker中的未来日期

1 个答案: