Add the ability to disable arbitrary date picker and calendar dates #6905
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
foxbunny
force-pushed
the
date-picker-date-filter
branch
from
39504bd to
a648d88
Compare
foxbunny
force-pushed
the
date-picker-date-filter
branch
from
a648d88 to
fc57274
Compare
Member
|
While disabling works (I tested it in room booking), it doesn't actually display the disabled dates as inactive (w/ your example code that disables weekends). |
Collaborator
Author
Sorry, missed your comment. I'll check and adjust. |
Collaborator
Author
|
@ThiefMaster Can you tell me more about what you tried? I've manually overridden the filter prop like so: diff --git a/indico/web/client/js/react/components/DatePicker.jsx b/indico/web/client/js/react/components/DatePicker.jsx
index 836378c241..dd4e95b111 100644
--- a/indico/web/client/js/react/components/DatePicker.jsx
+++ b/indico/web/client/js/react/components/DatePicker.jsx
@@ -37,6 +37,10 @@ export default function DatePicker({
const formattedValue = formatDate(format, fromISOLocalDate(value));
+ filter = (d, meta) => {
+ return !meta.weekInfo.weekend.includes(d.getDay() || 7);
+ };
+
return (
<ind-date-picker
min={fromISOLocalDate(min)?.toDateString()}With this patch, I get the intended result:
|
Member
|
This is what I Tested with (in room booking) diff --git a/indico/modules/rb/client/js/components/BookingBootstrapForm.jsx b/indico/modules/rb/client/js/components/BookingBootstrapForm.jsx
index da5f9ca2fe..e2d3ff162a 100644
--- a/indico/modules/rb/client/js/components/BookingBootstrapForm.jsx
+++ b/indico/modules/rb/client/js/components/BookingBootstrapForm.jsx
@@ -381,6 +381,7 @@ class BookingBootstrapForm extends React.Component {
<Form.Group inline>
<DateRangePicker
min={getBookingRangeMinDate(isAdminOverrideEnabled, bookingGracePeriod)}
+ filter={(d, meta) => !meta.weekInfo.weekend.includes(d.getDay() || 7)}
value={{startDate: serializeDate(startDate), endDate: serializeDate(endDate)}}
onChange={({startDate: sd, endDate: ed}) =>
this.updateDates(toMoment(sd), toMoment(ed))
@@ -392,6 +393,7 @@ class BookingBootstrapForm extends React.Component {
<Form.Group inline>
<DatePicker
min={getBookingRangeMinDate(isAdminOverrideEnabled, bookingGracePeriod)}
+ filter={(d, meta) => !meta.weekInfo.weekend.includes(d.getDay() || 7)}
value={serializeDate(startDate)}
invalidValue={null}
onChange={date => this.updateDates(toMoment(date), null)} |
foxbunny
force-pushed
the
date-picker-date-filter
branch
from
fc57274 to
2aa9cae
Compare
Collaborator
Author
|
Turns out even I forgot the subtle nuances of disabling dates. 😂 Had to use aria-disabled instead of disabled cause the buttons still need to be reachable by keyboard. Anyway, this should fix it across the board now. |
ThiefMaster
force-pushed
the
date-picker-date-filter
branch
from
2aa9cae to
2ae37eb
Compare
ThiefMaster
approved these changes
Jun 20, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.