Description
Implement a Date widget with spinner input within the form renderer. This widget allows users to select a date by scrolling through separate vertical columns for Day, Month, and Year instead of using a standard grid-based calendar picker. This is triggered by the appearance="no-calendar" attribute in the XForm definition.
Key requirements include:
- Three independent scrolling columns (spinners).
- Dynamic adjustment of the "Day" column based on the selected Month and Year (e.g., February 29th logic for leap years).
- Support for localization of month names.
- Date and DateTime question types support "no-calendar"
Checklist
- Does it need UI/UX design?
- Does it need API design?
- Does it need design around state flow?
- Does it need a test plan?
User Stories
-
As a data collector entering a date far in the past,
I want to use scrolling "flywheel" pickers rather than a calendar grid,
so that I can navigate through decades much faster than clicking through individual months.
-
As a non-technical user,
I want an intuitive scrolling interface for year selection,
so that I don’t get stuck manually clicking through months because I didn't realize the year label in a calendar UI was a clickable shortcut.
-
As a data collector reading from a physical document,
I want to input date components linearly using spinners,
so that the digital entry process feels more analogous and direct compared to the printed information I am looking at.
Design
Dependencies
- Existing
DateInput component architecture.
- Internationalization (i18n) library for localized month names.
Related Issues
Description
Implement a Date widget with spinner input within the form renderer. This widget allows users to select a date by scrolling through separate vertical columns for Day, Month, and Year instead of using a standard grid-based calendar picker. This is triggered by the
appearance="no-calendar"attribute in the XForm definition.Key requirements include:
Checklist
User Stories
As a data collector entering a date far in the past,
I want to use scrolling "flywheel" pickers rather than a calendar grid,
so that I can navigate through decades much faster than clicking through individual months.
As a non-technical user,
I want an intuitive scrolling interface for year selection,
so that I don’t get stuck manually clicking through months because I didn't realize the year label in a calendar UI was a clickable shortcut.
As a data collector reading from a physical document,
I want to input date components linearly using spinners,
so that the digital entry process feels more analogous and direct compared to the printed information I am looking at.
Design
Dependencies
DateInputcomponent architecture.Related Issues