Time Circuits · Date Picker
A custom calendar grid with arrow-key navigation next to a native date input — the two date-entry shapes every suite meets.
Set the destination time: page through months, click a day, do not hit 1955 by accident.
Date Picker is a medium Forms & Inputs challenge on Fun UI Playground. A custom calendar grid with arrow-key navigation next to a native date input — the two date-entry shapes every suite meets. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “date-picker-”, and the techniques it exercises are calendar widgets, grid navigation, month paging, native date inputs.
At a glance
- Category
- Forms & Inputs
- Difficulty
- medium
- Teaches
- calendar widgets · grid navigation · month paging · native date inputs
- Backend
- None — runs entirely in the browser
- Locators
- Stable
idanddata-testid, prefixeddate-picker-
Selectors on this page
| Locator | What it is |
|---|---|
#date-picker-grid #date-picker-day-<yyyy-mm-dd> | Calendar: #date-picker-grid (role="grid") with day buttons #date-picker-day-<yyyy-mm-dd> (role="gridcell", aria-selected) |
#date-picker-prev #date-picker-next #date-picker-month | Month paging: #date-picker-prev / #date-picker-next · current month in #date-picker-month |
#date-picker-value | The picked date lands in #date-picker-value as "Destination time: yyyy-mm-dd" |
input#date-picker-native #date-picker-native-value | Native alternative: input#date-picker-native (type=date) — fill it as yyyy-mm-dd text; its mirror is #date-picker-native-value |
Frequently asked questions
How do I pick a date from a custom calendar widget?
Page with #date-picker-prev / #date-picker-next until #date-picker-month reads the month you want, then click the day cell #date-picker-day-<yyyy-mm-dd> in #date-picker-grid. The picked value appears in #date-picker-value.
How do I fill a native date input?
Fill input#date-picker-native as yyyy-mm-dd text rather than clicking through the browser's own calendar popup, which is native chrome no locator can touch. Its mirror is #date-picker-native-value, and the grid opens on October 2015 every visit so nothing depends on today's date.
More Forms & Inputs
- Central Perk Staff Login · Login Form
- Starter Lab Team Picker · Checkboxes & Radios
- The Sorting Ceremony · Dropdowns
- Barista Keypad · Inputs & Key Presses
- The Dundies · JavaScript Alerts
- Screenplay Submissions · File Upload
- The Apothecary Index · Autocomplete Combobox
- Customs Declaration · Native Form Validation
- All Forms & Inputs challenges
Updated
Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.