javascriptvaadinweb-componentpolymer-2.x

Disable entire month in vaadin date picker

I am trying to disable all dates of all months in vaadin-date-picker. While looking through the code, I found that I can individually disable dates by setting disabled in vaadin-month-calendar.html#L75 . In that case the disabled date is faded, which is due to vaadin-month-calendar-styles.html#L119, and one can not select the disabled date any more.

Similarly, I have done the following,

<div id="days" part="days" disabled>
    <template is="dom-repeat" items="[[_days]]">
        <div part="date" today$="[[_isToday(item)]]" selected$="[[_dateEquals(item, selectedDate)]]" focused$="[[_dateEquals(item, focusedDate)]]" date="[[item]]" disabled$="[[!_dateAllowed(item, minDate, maxDate)]]" role$="[[_getRole(item)]]" aria-label$="[[_getAriaLabel(item)]]" aria-disabled$="[[_getAriaDisabled(item, minDate, maxDate)]]">[[_getDate(item)]]</div>
    </template>
</div>

And added the required style:

[part="days"][disabled] {
    color: var(--lumo-disabled-text-color);
}

In this case, all dates of all months are faded, but the user stiil can select them. Am I missing something? How to make disabled dates not selectable as well?

Solution

  • Ok, I found it, just need to add pointer-events: none;