此问题与: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%;" />
在我的 Controller 中我有这个:
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，我也可以单击并选择任何 future 。我该如何解决？呈现的标记将是这样的:
<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 中禁用 future 日期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41545174/