Как отключить прошлые даты, не пряча их в кендо?
Если я установил минимальное значение для выбора даты, он не будет отображать даты меньше минимальной даты при его открытии.
Мое требование состоит в том, чтобы даты, отличные от минимальной даты, отображались в окне выбора даты, но их следует отключить.
2 ответа
Решение
Вы можете сделать это с помощью стилей CSS и с помощью пользовательского контента в Kendo datepicker.
HTML:
<input id="datepicker" style="width:150px;" />
CSS:
.disabledDay {
display: block;
overflow: hidden;
min-height: 22px;
line-height: 22px;
padding: 0 .45em 0 .1em;
cursor:default;
opacity: 0.5;
}
JavaScript:
$(document).ready(function() {
disabledDaysBefore = [
+new Date("10/20/2014")
];
var p = $("#datepicker").kendoDatePicker({
value: new Date(),
dates: disabledDaysBefore,
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")
},
}).data("kendoDatePicker");
});
Посмотреть демо: JSFIDDLE
Слава Богу, что в этом случае я смог преобразовать его в синтаксис Razor, если кто-то захочет использовать его вместо этого.
@(Html.Kendo().DatePicker()
.Name("datepicker")
.Value(DateTime.Today)
.Events(e => e.Open("onOpen"))
.MonthTemplate("# if (data.date < disabledDaysBefore) { #" +
"<div class='disabledDay'>#= data.value #</div>" +
"# } else { #" +
"#= data.value #" +
"# } #")
.HtmlAttributes(new { style = "width: 150px;" })
)
$(document).ready(function () {
disabledDaysBefore = [
+new Date("10/20/2014")
];
});
function onOpen() {
$(".disabledDay").parent().removeClass("k-link")
$(".disabledDay").parent().removeAttr("href")
}