July 2026
Click a later day — the tinted band is the in-range span (range_middle); the outlined 19 is today
Date Picker
/ <input type="date"> · <DayPicker mode="range" /> /
also called calendar picker, calendar popup, calendar dropdown, date range picker, month view
“The little calendar that pops up” on a date field is a date picker — the field is the trigger, the floating month is the calendar popover, and the grid of days is a role="grid" whose chosen day carries aria-selected. Pick two ends and it's a date-range picker: the first and last days are the range start and end (range_start / range_end in react-day-picker) and the tinted stripe between them is the in-range span (range_middle). A month grid standing alone is just a calendar; the picker is the one wired to a field.
If you called it…
…you meant a date picker.
Anatomy — every part, named
- 2Range start / end
range_start / range_end“The first and last day you clicked” are the range endpoints — solid-filled cells marking where the selected range begins and ends.
- 3In-range span
range_middle“The highlighted stripe between the two dates” is the in-range span — every day between the endpoints gets the range_middle modifier and the pale tint.
- 4Today indicator
today“The outlined day that isn't selected” is the today indicator — it marks the current date independently of any selection.
Prompt — paste into your agent
Build a date picker: a date field that opens a calendar popover — the shadcn/ui pattern is Popover + Calendar, where Calendar wraps react-day-picker's DayPicker. For a date range use mode="range": the endpoints get the range_start / range_end modifiers and the tinted days between them are range_middle. Treat dates as civil dates (yyyy-mm-dd strings), never Date-parsed-as-UTC (the classic off-by-one-day bug); start the week per the locale; keep the grid keyboard model (arrows move by day and week, PageUp/PageDown by month).
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my date picker (react-day-picker / <input type="date"> / range mode). Rule out: the selected day rendering one day off because a date-only string was parsed as UTC and displayed in local time; the wrong month because JavaScript Date months are 0-based; range endpoints silently swapped or end-before-start allowed after a typed edit; the week starting on the wrong day for the locale; the calendar popover clipped by an overflow container, transform ancestor, or viewport edge; arrow keys dead because the grid lost its roving tabindex. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| HTML | <input type="date"> | the native control — its value is always yyyy-mm-dd |
| React | <DayPicker mode="range" /> | react-day-picker — what shadcn/ui's <Calendar> wraps |
| Web API | input.showPicker() | opens the native picker programmatically (needs a user gesture) |
| ARIA | role="grid" | the calendar grid; the chosen day carries aria-selected="true" |
| SwiftUI | .datePickerStyle(.graphical) | SwiftUI DatePicker's inline calendar style |