Как отключить прошедшие даты в кендо? - PullRequest
Новая
       13

Как отключить прошедшие даты в кендо?

0 голосов
/ 20 сентября 2018

Как отключить прошедшие даты в кендо?(Проверка выбора даты)

Это позволит пользователю выбрать только текущую и будущую дату. 

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

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

1 Ответ

0 голосов
/ 20 сентября 2018

Самый короткий способ отключить прошлые даты - использовать параметр min с текущим значением даты: 

var presentDate = new Date();

$(function () {
    var datepicker = $('#AppointmentDate').kendoDatePicker({
        value: presentDate,
        min: presentDate,
    }).data('kendoDatePicker');
});

Если вы используете Razor с @Html.Kendo() помощником, используйте DatePickerBuilderBase.Min() method: 

@(Html.Kendo().DatePicker().Name("AppointmentDate").Min(DateTime.Today))

Однако параметр min удалит все отключенные прошлые даты (т.е. они не отображаются в представлении календаря).Если вы хотите отобразить отключенные даты, но пользователь не может с ними взаимодействовать (щелкнув по дате), используйте k-state-disabled CSS-класс в опции empty внутри 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 (скрытые прошедшие даты)

JSFiddle demo 2 (серые прошедшие даты)

Ссылки:

Kendo.Mvc.UI.Fluent.DatePickerBuilderBase.Min (DateTime)

Показывать даты вне диапазона как отключенные

Kendo MVC DatePicker - Отключить даты

Аналогичная проблема (с другим подходом):

Как отключить прошлые даты, не скрывая их в средстве выбора дат Kendo?

...