DatePicker disable Saturday and Sunday

General
1

Hi, is it possible to disable weekends for selection in date picker? I could use a validation to check after its selected, but i want to disable weekend to choose

2

Here’s an open issue: [date-picker] Add support for disabled dates · Issue #1820 · vaadin/web-components · GitHub

1 Like
3

Thanks, looks not like if its released soon ;)

4

The web-components part is released in 24.4… so technically you can use it with some JS Kung-Fu

5

One approach is to do what is done here, but in addition add “pointer-events: none” to styles as well.

There is an another example here

As pointed above, the web component has also some JS API now, that will offer slightly more robust way than using those aria attributes, but the Java API is missing.

6

It’s an interesting problem, since there are lots of common patterns that are quite difficult to describe in one data model. Keep in mind that there is a practically infinite number of days, so enumerating the disabled (or enabled) days is going to be too much data to transmit over the wire.

For example, how would you cover the following cases:

  • There are specific 72 dates in 2025 that are enabled. Some of those are consecutive.
  • There are specific 72 dates in 2025 that are disabled. Some of those are consecutive.
  • Every Saturday and Sunday is disabled
  • Every Saturday and Sunday plus all the public holidays in Bavaria, Germany are disabled
  • Every Saturday and Sunday plus all the public holidays in Bavaria, Germany, and the months June and July are disabled
    …and so on. And if you have multiple different properties (such as disabledWeekdays and disabledDates), how do you resolve conflicts?
7

Yes, as it is not possible to handle the generic case with simple rule. Probably the best approach is to have DataProvider API included in DatePicker, the data provider would have either the disabled or enabled dates. In some applications there more disabled ones than enabled ones and vica versa. So there is API to configure the role of the data. And then DataPicker should just lazy load the enabled/disabled dates of the visible months while user scrolls back and worth just like Grid does. For simple cases there should be couple of Factory convencience constructors that can generate e.g. DataProvider with weekends disabled between start and end date.

Weekends and different kinds of national holidays are not the only use case. One use case I see typical is that one wants to block dates that are e.g. fully booked or otherwise not available due some other similar business logic reason. And that naturally can be very dynamic as some dates can become available or getting disabled any given moment.

1 Like
8

Another (less developer-friendly) option would be having the possibility to define a JavaScript callback from the server, similar to how Charts allows custom tooltip Formatters. That would be more difficult to use, but would reduce the amount of client-server traffic.

1 Like