getodk / getodk/web-forms

Implement a Date widget with spinner input (no-calendar appearance)

Open
#781 2 comments 0 reactions 0 assignees View on GitHub
front-end In Collect In Enketo
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.