New to Kendo UI for jQuery? Download free 30-day trial

Show Out-of-Range DatePicker Dates as Disabled

Environment

Product Progress Kendo UI DatePicker for jQuery
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript

Description

How can I show the dates that are out of the min-max range as disabled in the Kendo UI for jQuery DatePicker?

Solution

The following example demonstrates how to show the dates that are out of the min-max range as disabled by using the k-disabled class.

    <input id="datepicker" style="width:200px;" />
    <script>
      $(document).ready(function() {
        $("#datepicker").kendoDatePicker({
          value: new Date(2014, 10, 20),
          min: new Date(2014, 10, 10),
          max: new Date(2014, 11, 10),
          month: {
            empty: '<span class="k-state-disabled">#= data.value #</span>'
          }
        });
      });
    </script>

See Also

In this article