如何禁用剑道日期选择器中的过去日期？答案

【问题标题】：How to disable the past dates in the Kendo date picker?如何禁用剑道日期选择器中的过去日期？
【发布时间】：2018-09-20 03:45:50
【问题描述】：

如何在 Kendo 日期选择器中禁用过去的日期？（日期选择器验证）

这将允许用户仅选择当前日期和未来日期。

In the HTML :
@Html.EditorFor(Model => Model.AppointmentDate)

In the JQuery :
$('#AppointmentDatee').data('kendoDatePicker')

【问题讨论】：

你能提供剑道日期选择器代码的sn-p吗？至少它应该符合minimal reproducible example。
@TetsuyaYamamoto，很抱歉。请看一下语法
我认为Html.Kendo().DatePicker().Min(DateTime.Now) 或Html.Kendo().DatePicker().Min(DateTime.Today) 更容易使用。另外我想问一下：您是要隐藏所有禁用的过去日期还是只显示但禁用点击它们？
不管怎样，都很好。目标是选择今天或未来的日期。不是过去的日期。我希望对 html 编辑器进行更改。拥有 kendo datepicker 语法实际上会改变日期格式或设计格式。
我决定将它们都包括在内（隐藏所有过去的日期和灰显的禁用日期）。实现部分有些相似，只是差别不大。

标签： asp.net-mvc asp.net-mvc-4 kendo-ui kendo-asp.net-mvc

【解决方案1】：

禁用过去日期的最短方法是使用带有当前日期值的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 参数将删除所有禁用的过去日期（即它们不会显示在日历视图中）。如果您想显示禁用的日期，但用户无法与它们进行交互（通过单击日期），请在 empty 参数中使用 k-state-disabled CSS 类 month 参数：

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?

【讨论】：

最好详细的解释；

【解决方案2】：

如果您将 jquery 用于您的 kendoDatePicker ，此代码可能会对您有所帮助！

$("#MyDatapickerElement").kendoDatePicker({
        value: new Date(),
        disableDates: function (date) {
            if (date <= new Date()) {
                return true;
            } else {
                return false;
            }
        }
    });

【讨论】：

【解决方案3】：

如果使用 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>")
             )

【讨论】：