Disable entire month in vaadin date picker

[sudipta1411]

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?

[Haprog]

Currently <vaadin-date-picker> doesn't support disabling specific dates. Currently we only support the min and max attributes for specifying a lower and/or upper date limit for which range dates are allowed.

We have an open feature request #646 about adding this kind of functionality which you're apparently looking for. Please give that issue a thumbs up if this is what you want.

I'm not quite sure about what exactly you want though. The issue title says "Disable entire month in vaadin date picker" so do you want to disable a specific month (or multiple months)? Though you also said "disable all dates of all months" which sounds like you want to disable the whole date picker (or was this mistyped?). You can set the whole date picker as disabled or readonly but in that case you can't open the month calendar overlay (you would only see the currently set value in the text field).

Similarly, I have done the following

I'm not sure where you have put that code in. Do you have a clone of vaadin-date-picker where you edited vaadin-month-calendar.html? Are you trying to extend some of the internal components? Or are you trying to programmatically modify the DOM of a vaadin-date-picker instance after it has been created?

However it is currently possible to customize which dates are disabled by overriding some private API. Here's an example of how you could disable all Saturdays and Sundays: https://glitch.com/edit/#!/ablaze-carpet But be aware that this kind of usage is not supported (the private API methods may change in any new version which might break your implementation if you rely on those).

[Haprog]

Closing as a duplicate of #646.