如何在Kendo日期选择器中禁用过去的日期? (日期选择器验证)
这将允许用户仅选择当前日期和将来的日期。
In the HTML :
@Html.EditorFor(Model => Model.AppointmentDate)
In the JQuery :
$('#AppointmentDatee').data('kendoDatePicker')
答案 0 :(得分:3)
禁用过去日期的最短方法是使用带有当前日期值的min
参数:
var presentDate = new Date();
$(function () {
var datepicker = $('#AppointmentDate').kendoDatePicker({
value: presentDate,
min: presentDate,
}).data('kendoDatePicker');
});
如果您将Razor与@Html.Kendo()
助手一起使用,请使用DatePickerBuilderBase.Min()
方法:
@(Html.Kendo().DatePicker().Name("AppointmentDate").Min(DateTime.Today))
但是,min
参数将删除所有禁用的过去日期(即它们不会显示在日历视图中)。如果要显示禁用的日期,但用户无法与它们交互(通过单击日期),请在k-state-disabled
参数内的empty
选项中使用month
CSS类:
var datepicker = $('#AppointmentDate2').kendoDatePicker({
value: presentDate,
min: presentDate,
month: {
empty: '<div class="k-state-disabled">#= data.value #</div>'
}
}).data('kendoDatePicker');
如果使用了@(Html.Kendo())
助手,请使用DisabledDates
来调用一个禁用过去日期的函数,如下例所示:
<script>
var getPastDates = function(begin, end) {
for (var dtarr = [], date = start; date < end; date.setDate(date.getDate() + 1)) {
dtarr.push(new Date(dt));
}
return dtarr;
}
function disablePastDates(date) {
var pastDate = getPastDates(new Date('0001-01-01T00:00:00Z'), new Date());
if (date && compareDates(date, dates)) {
return true;
}
else {
return false;
}
}
function compareDates(date, dates) {
for (var i = 0; i < dates.length; i++) {
if (dates[i].getDate() == date.getDate() &&
dates[i].getMonth() == date.getMonth() &&
dates[i].getYear() == date.getYear()) {
return true;
}
}
}
</script>
助手的用法:
@(Html.Kendo().DatePicker().Name("AppointmentDate").DisableDates("disablePastDates"))
工作示例:
JSFiddle demo 1 (hidden past dates)
JSFiddle demo 2 (grayed-out past dates)
参考文献:
Kendo.Mvc.UI.Fluent.DatePickerBuilderBase.Min(DateTime)
Show Out-of-Range Dates as Disabled
Kendo MVC DatePicker - Disable dates
类似的问题(使用不同的方法):
How to disable past dates without hiding them in Kendo date picker?
答案 1 :(得分:0)
如果您对kendoDatePicker使用jquery,则此代码可能会对您有所帮助!
$("#MyDatapickerElement").kendoDatePicker({
value: new Date(),
disableDates: function (date) {
if (date <= new Date()) {
return true;
} else {
return false;
}
}
});
答案 2 :(得分:0)
如果使用 Html.Kendo().DatePicker() 您可以使用 MonthTemplate 显示禁用的日期。下面的示例显示了将最小日期设置为 DateTime.Today,并将 MonthTemplate 设置为禁用显示过去的日期。
Html.Kendo().DatePicker()
.Name("MyDate")
.Min(DateTime.Today)
.MonthTemplate(m=>m
.Empty("<div class=\"k-state-disabled\">#= data.value #</div>")
)