Last Updated: 04 Apr 2022 19:10 by ADMIN
Release 3.2.0
Created on: 19 Oct 2021 14:23
Category: DatePicker
Type: Bug Report
k-state-disabled class is not applied to all disabled cells

I want to apply some custom CSS to hide the disabled dates. However, it appears that k-state-disabled class is not applied to all of them. 

For example, if I set the Max parameter to October 15th 2021, the remaining dates of October have the k-state-disabled but the ones in November only have k-other-month class.


The same behavior occurs when I set the Min parameter - the dates from the previous month do not have k-state-disabled class.




Note: This bug also affects Calendar, DateRangePicker and DateTimePicker components.

As a workaround for the time being you might try another approach - all the disabled cells have aria-disabled = "true" attribute which you can use as a CSS selector to target the disabled cells:

    [aria-disabled="true"] {
        visibility: hidden;

<TelerikDatePicker @bind-Value="datePickerValue" Max="@MaxValue"></TelerikDatePicker>

@code  {
    DateTime datePickerValue { get; set; } = new DateTime(2021, 10, 1);
    DateTime MaxValue { get; set; } = DateTime.Now;