Disabled dates for input type=date

[thany]

It appears to be pretty common to have some kind of feature to disable the selection of a certain set of dates in a <input type=date>. Currently, we only have min and max to play with.

Use-cases:

1. Disabled weekend dates
2. Disabled national holidays
3. Disabled dates because some business rule says so

The currently existing workarounds:

1. Validation - This requires the user to blindly try and pick dates, and see if they are allowed. Customer will likely get annoyed and demand that unallowed dates be disabled in the date picker.
2. Custom component - This undoubtedly comes with a myriad of accessibility problems, extra app footprint, and a reduced experience especially on mobile devices.
3. Dropdown list - This takes away the visual date picker, and only really works for a small set of allowable dates to pick from.

Proposal:

<input type=date disabled-dates="2023-05-05, 2023-07-04, 2023-12-25">

[AaronDewes]

All of your use cases would end up with an extremely long list of disallowed dates, I'm not sure if this proposal makes sense for these cases.

[thany]

My case is only an example. The point is to disable any arbitrary collection of dates, not to disable public holidays specifically. What those dates are in practice, is up to business rules to decide, or some kind of event calender, a user preference of some kind, or whatever else. Arbitrary.

When disabling dates, it's usually because some kind of business or service is not available on that date. With that, it makes to also specify min/max dates, and then the number of public holidays listed, and any other disallowed dates, could well be a rather small list.

Another option would be to make it an event:

<input type=date ondatedisabled="disabledDate">

<script>
function disabledDate(date) {
  if (!isBusinessAvalableOnThisDate(date)) {
    return false;
  }
}
</script>

(edit: must've been drunk - the script now makes sense)

[AaronDewes]

Disabled weekend dates

A syntax like disabled-dates="Saturday, Sunday" could be useful for this.

[fantasai]

All of your use cases would end up with an extremely long list of disallowed dates

Allowing days of the week and wildcards would go a long way towards making this manageable. (Possibly not far enough, but still a lot...)

[thany]

Yes, wildcards would prove to be quite helpful. But again, it's an example.

What I'm referring to, is an arbitrary list of dates. Perhaps coming from a backend system of some kind, or otherwise precalculated by something before the HTML gets rendered. So a list of fully defined dates is still desirable.

[EziKielCroat]

Restricting date picking on a day bases is in my opinion a pretty good approach. First idea that came to my mind was to assign days of the week number values (Monday=0, Tuesday=1, Wednesday=2, Thursday=3, Friday=4, Saturday=5, Sunday=6) and have a special attribute called blocked-days in which the values for each day can be put to symbolize days that you want blocked.

This is a code example for blocking Monday, Saturday and Sunday:

<input type="date" blocked-days=[0, 5, 6]>

[mikeriley131]

Just curious if this suggestion has any traction. I work for a bank and need to be able to exclude weekends and holidays for certain transactions. I'd love to not have to resort to a large package like react-datepicker and be able to stick with native elements.

[mikeriley131]

As a follow up to today's WHATNOT meeting, here are a few examples of how Javascript datepickers handle disabled dates.

Some accept an array of dates to disable.

• jQuery
• react-datepicker
• react-aria

And some accept a function that returns a boolean.

• Material UI
• Ant Design

I think that @thany and @EziKielCroat both suggest ideal API examples and perhaps two attributes are needed. One that takes a list of datestamps in order to disable specific dates, and one like that takes a list of days of the week in order to disable all weekends, for example.

<input type="date" disabled-dates="2024-01-01, 2024-07-04, 2024-12-25">

<input type="date" disabled-days="0, 6">

To @AaronDewes's point, in the list of dates example the list could get quite long and it would be up to implementors to manually maintain and update the list periodically, but from an internationalization perspective it would be the most flexible, and certainly an improvement from the current scenario where disabling specific dates is not at all possible.