feat: date range picker in Visit Registration replaces two date pickers#1603
Open
shivoomiess wants to merge 7 commits into
Open
feat: date range picker in Visit Registration replaces two date pickers#1603shivoomiess wants to merge 7 commits into
shivoomiess wants to merge 7 commits into
Conversation
shivoomiess
requested review from
TCMeldrum,
jekabs-karklins and
yoganandaness
and removed request for
a team and
TCMeldrum
yoganandaness
approved these changes
Jul 1, 2026
| : undefined; | ||
|
|
||
| return ( | ||
| <div style={{ display: 'flex' }}> |
Contributor
There was a problem hiding this comment.
Can we use MUI box instead of div
<Box sx={{ display: 'flex' }}>
|
|
||
| return ( | ||
| <div style={{ display: 'flex' }}> | ||
| <div style={{ flex: 1 }}> |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR replaces the separate “Visit start” and “Visit end” date pickers in the Visit Registration flow with a single date-range picker UI, aiming to make selecting a valid start/end range more intuitive and avoid MUI date-picker/Cypress friction.
Changes:
- Introduces a new
FormikUIDayRangePickercomponent built onreact-day-pickerrendered in an MUIPopover. - Updates
QuestionaryComponentVisitBasisto use the new range picker and map the selected range tostartsAt/endsAt. - Adds a
toDateTimehelper to normalize backend-loaded ISO strings into LuxonDateTime.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| apps/frontend/src/components/questionary/questionaryComponents/VisitBasis/QuestionaryComponentVisitBasis.tsx | Switches Visit Registration date inputs to a single range picker and adds normalization for loaded values. |
| apps/frontend/src/components/common/FormikUIDayRangePicker.tsx | Adds a reusable day range picker component using react-day-picker inside an MUI Popover. |
Comment on lines
+73
to
+78
| onChange={({ from, to }: DayRange) => { | ||
| dispatch({ | ||
| type: 'ITEM_WITH_QUESTIONARY_MODIFIED', | ||
| itemWithQuestionary: { startsAt: from, endsAt: to }, | ||
| }); | ||
| }} |
Comment on lines
+30
to
+32
| if (typeof value === 'string') { | ||
| return DateTime.fromISO(value); | ||
| } |
Comment on lines
+102
to
+104
| const disabledDays: Matcher | undefined = minDate | ||
| ? { before: minDate.toJSDate() } | ||
| : undefined; |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
Replaces the two separate "Visit start" and "Visit end" date pickers in the Visit Registration form with a single date-range picker. Selecting a range now populates both
startsAtandendsAtfrom one calendar UI.Motivation and Context
Registering a visit previously required interacting with two independent MUI date pickers, which was clunky and made it easy to pick an end date before the start date. A single range picker is more intuitive, keeps start/end selection in one place, and visually communicates the selected span. It also drops the MUI
@mui/x-date-pickers/LocalizationProviderboilerplate that only existed to work around Cypress/Material-UI datepicker testing issues.Changes
FormikUIDayRangePicker.tsxcomponent built onreact-day-picker, rendering the calendar inside an MUIPopover(so it isn't clipped by the modal) with a read-only text field, a calendar icon button, and a "Done" button. It supportsminDate, custom Luxon displayformat, required/disabled/error states, and themed range styling.QuestionaryComponentVisitBasis.tsxto use the newDayRangePickerinstead of the twoField/DatePickerinstances wrapped inLocalizationProvider.toDateTimehelper to normalizestartsAt/endsAt, which arrive as LuxonDateTimes once edited but as ISO strings when a registration is loaded from the backend.touched/errors(viagetIn) into the range picker so start/end validation errors surface on the single field.useThemeanddesktopModeMediaQueryCypress workaround.How Has This Been Tested?
Visually, we can see that the functionality works as intended. Since there are no changes on the backend and the frontend uses the same flow to send / receive data, we confirm the changes have been tested sufficiently.
Fixes Jira Issue
https://jira.ess.eu//browse/SWAP-5412
Depends On
Tests included/Docs Updated?