How to disable the past dates in the Kendo date picker?
The shortest way to disable past dates is using min
parameter with current date value:
var presentDate = new Date();
$(function () {
var datepicker = $('#AppointmentDate').kendoDatePicker({
value: presentDate,
min: presentDate,
}).data('kendoDatePicker');
});
If you're using Razor with @Html.Kendo()
helper, use DatePickerBuilderBase.Min()
method:
@(Html.Kendo().DatePicker().Name("AppointmentDate").Min(DateTime.Today))
However, the min
parameter will remove all disabled past dates (i.e. they're not shown in calendar view). If you want to show disabled dates but the user cannot interact with them (by clicking the date), use k-state-disabled
CSS class in empty
option inside month
parameter:
var datepicker = $('#AppointmentDate2').kendoDatePicker({
value: presentDate,
min: presentDate,
month: {
empty: '<div class="k-state-disabled">#= data.value #</div>'
}
}).data('kendoDatePicker');
If @(Html.Kendo())
helper is used, use DisabledDates
to call a function which disables past dates like example below:
<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>
Helper usage:
@(Html.Kendo().DatePicker().Name("AppointmentDate").DisableDates("disablePastDates"))
Working examples:
JSFiddle demo 1 (hidden past dates)
JSFiddle demo 2 (grayed-out past dates)
References:
Kendo.Mvc.UI.Fluent.DatePickerBuilderBase.Min(DateTime)
Show Out-of-Range Dates as Disabled
Kendo MVC DatePicker - Disable dates
Similar issue (with different approach):
How to disable past dates without hiding them in Kendo date picker?
Related videos on Youtube
goofyui
Programmer - Interested in Big Data, Statistical Data Analysis, Cloud Computing, Mobile Apps
Updated on June 04, 2022Comments
-
goofyui almost 2 years
How to disable the past dates in the Kendo date picker ? ( Date Picker validation)
That will allow the user to select only the current date and future date.
In the HTML : @Html.EditorFor(Model => Model.AppointmentDate) In the JQuery : $('#AppointmentDatee').data('kendoDatePicker')
-
Tetsuya Yamamoto over 5 yearsCan you provide snippet of the Kendo date picker code? At least it should comply with minimal reproducible example.
-
goofyui over 5 years@TetsuyaYamamoto, sorry for that. please take a look on the syntax
-
Tetsuya Yamamoto over 5 yearsI think easier to use
Html.Kendo().DatePicker().Min(DateTime.Now)
orHtml.Kendo().DatePicker().Min(DateTime.Today)
. Also I want to ask this: are you want to hide all disabled past dates or just show but disable click on them? -
goofyui over 5 yearsEither way , it is fine. Objective is to select either today’s or future date. Not the past date. I was hoping to make the changes on html editor . Having kendo datepicker syntax actually changes the date format or design format.
-
Tetsuya Yamamoto over 5 yearsI decided to include both of them (hiding all past dates & grayed-out disabled dates). The implementation parts are somewhat similar, just with little difference.
-
-
goofyui over 5 yearsBest well detailed explanation;