Datepickerfor & Disabled Dates

[Mike]

I'm trying to use the Kendo Datepickerfor in an MVC application that doesn't allow past dates to be selected. If we use .Min or .DisableDates then the input doesn't display the date from the Model.

I've tried a workaround with using a template to set the past dates as 'k-state-disabled' but couldn't get to a solid solution of disabling click events. It would work using the Open event, but when navigating in the calendar, it would still allow past dates to be selected.

Thoughts/help would be great.

[Anton Mironov]

Hello Mike,

Thank you for the details provided.

In order to disable the selection of the days before the value of the Kendo UI DatePicker, I would recommend the following approach:

1. Use the "Open" Event of the DatePicker.
2. In the event handler, catch a "td" element is clicked.
3. Get the current value of the DatePicker.
4. Get the date of the newly clicked td item(add one month to its value as it is index numerated e.g. 0-11).
5. Conditionally check if the newly selected date is before the date of the current value.
6. If point 5 is true - stop the propagation of the event.

Here is an example:

// Kendo UI DatePicker:
.Events(e => e.Open("onOpen"))

// Event handler:
    function onOpen() {
        $("td").click(function (e) {
            
            var datepicker = $("#datepicker").data("kendoDatePicker");
            var datepickerValue = datepicker.value();

            var newlySelected = e.currentTarget.firstChild.dataset.value;
            var newlySelectedDate = new Date(newlySelected);
            newlySelectedDate.setMonth(newlySelectedDate.getMonth() + 1);

            if (newlySelectedDate < datepickerValue) {
                e.stopPropagation();
            }
        })
    }

Attached is a sample project that represents the approach above. Make the needed tests locally and let me know if further assistance is needed.

 

Kind Regards,
Anton Mironov
Progress Telerik