Datepickerfor & Disabled Dates

1 Answer 72 Views
Date/Time Pickers
Mike
Top achievements
Rank 1
Mike asked on 30 Jun 2021, 12:59 PM

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.

1 Answer, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 05 Jul 2021, 08:29 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Date/Time Pickers
Asked by
Mike
Top achievements
Rank 1
Answers by
Anton Mironov
Telerik team
Share this question
or