Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Disabled dates for input type=date #9542

Open
thany opened this issue Jul 20, 2023 · 9 comments
Open

Disabled dates for input type=date #9542

thany opened this issue Jul 20, 2023 · 9 comments
Labels
addition/proposal New features or enhancements i18n-tracker Group bringing to attention of Internationalization, or tracked by i18n but not needing response. needs implementer interest Moving the issue forward requires implementers to express interest topic: forms

Comments

@thany
Copy link

thany commented Jul 20, 2023

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">
@annevk annevk added addition/proposal New features or enhancements needs implementer interest Moving the issue forward requires implementers to express interest topic: forms labels Jul 25, 2023
@AaronDewes
Copy link

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.

@r12a r12a added the i18n-tracker Group bringing to attention of Internationalization, or tracked by i18n but not needing response. label Jul 25, 2023
@thany
Copy link
Author

thany commented Jul 26, 2023

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
Copy link

Disabled weekend dates

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

@fantasai
Copy link
Contributor

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
Copy link
Author

thany commented Jul 31, 2023

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
Copy link

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
Copy link

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
Copy link

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.

And some accept a function that returns a boolean.

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.

@DivyarajsinhRana

This comment was marked as spam.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
addition/proposal New features or enhancements i18n-tracker Group bringing to attention of Internationalization, or tracked by i18n but not needing response. needs implementer interest Moving the issue forward requires implementers to express interest topic: forms
Development

No branches or pull requests

9 participants