Show Opacity for Disabled Months in DatePicker

Environment

Product

Progress® Kendo UI for Angular DatePicker

Description

How to show an opacity for a disabled month in a DatePicker's Year View?

Solution

1. Use the built-in disabledDates callback of the DatePicker component and disable the desired month in the handler.

   html

   <kendo-datepicker
       ...
       [disabledDates]="isDateDisabled"
   >...</kendo-datepicker>

   ts

   public isDateDisabled(date: Date): boolean {
       return date.getMonth() === 5;
   }

2. Inside the DatePicker component, use the built-in YearCellTemplateDirective. Inside the template, apply the k-disabled class to the disabled month in order to change the opacity.

   html

   <ng-template kendoCalendarYearCellTemplate let-context="cellContext">
       <span [class.k-disabled]="isDateDisabled(context.value)">
           {{context.formattedValue}}
       </span>
   </ng-template>

The following example shows the full implementation of the described approach.

Change Theme

Theme

Loading ...