该问题与以下内容有关: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>

最佳答案

实际上,这比起初我想的要简单得多。您可以使用选择器的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>

关于javascript - 在Kendo Angular DatePicker中禁用将来的日期,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41545174/

10-10 01:08