Implement a Date widget with spinner input (no-calendar appearance)
- Dominant language
- TypeScript
- Stars
- 38
- Forks
- 22
- PR merge metrics
- No merged PRs in 30d
Description
### 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?**
- [ ] Yes
- [X] No
- **Does it need API design?**
- [ ] Yes
- [X] No
- **Does it need design around state flow?**
- [ ] Yes
- [X] No
- **Does it need a test plan?**
- [X] Yes
- [ ] No
---
### 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
- **Figma**: [Insert URL to UI Mockups]
- **Design Docs**: [ODK Date Widget Reference](https://docs.getodk.org/form-question-types/#date-widget-with-spinner-input)
---
### Dependencies
- Existing `DateInput` component architecture.
- Internationalization (i18n) library for localized month names.
---
### Related Issues
- Related to Epic: https://github.com/getodk/web-forms/issues/304
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the existing DateInput component architecture and compare the intended behavior with the ODK Date Widget Reference. Define tests for the no-calendar appearance, including Date and DateTime questions, localized month names, and day limits across months and leap years. Done means three scrolling columns work and update consistently without the calendar grid.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, internationalization, testing
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100