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 enabledDates), 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
9

Yes, totally possible! Most date picker libraries (like jQuery UI, Flatpickr, or even native components in frameworks like React) support disabling specific days, including weekends. You just need to configure the disable or isDayDisabled option depending on the tool you’re using. And I agree—validating after selection works, but preventing the choice upfront is a smoother user experience. Speaking of thoughtful choices, switching to a digital business card has been a simple way I’ve gone more eco-friendly—cuts down on paper and supports sustainability without losing professionalism.

10

Yes, such function with callback function parameter has been added in the vaadin-date-picker web component, not very long ago, see isDateDisabled in doc here:

https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha3/#/elements/vaadin-date-picker

What has not been done is a user friendly Java API. I postulated one option for somewhat fancy version.

The JavaScript function API can be actually utilized by using thru datePicker.getElement().executeJs(..) but you need to design your self how you transfer the data, e.g. you can set a property, which will be serialized to json array (just set Java ArrayList in Element API, it will do it for you). And you can add piece of JavaScript that uses that data in the function you provide in isDateDisabled callback.