Show Out-of-Range Dates as Disabled

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.

Example

    <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

• DatePicker JavaScript API Reference
• How to Set the First Weekday
• How to Create Date Masking
• How to Globally Modify Default Options
• How to Hide the Default Button
• How to Integrate DatePicker with DateJS Library
• How to Make Input Elements Readonly
• How to Persist Entered Dates
• How to Resize Calendar Based on Input Width

For more runnable examples on the Kendo UI DatePicker, browse its How To documentation folder.