Build Assets
UI Component
Date Picker
Calendar overlay for selecting single dates or date ranges.
Platform: bothTags: date-picker, calendar, date, time, form
Purpose
Allows users to select a date (or date range) without requiring correct format input. Reduces errors from manual date entry. Calendar view gives spatial context (day of week, relative dates).
Anatomy
- Trigger input: date formatted per locale, calendar icon right
- Calendar panel: month grid with prev/next month arrows
- Month header: "August 2026" with navigation arrows
- Day grid: 7 columns, Mon–Sun headers, 36–40px day cells
- Selected day: filled accent circle
- Range: filled accent range between start and end dates
- Today: outlined or underlined indicator
- Disabled days: 40% opacity, not clickable
States
- Trigger closed: input shows formatted date or placeholder
- Open: calendar panel below (or above near viewport bottom)
- Day hover: light accent background
- Selected: filled accent circle
- Range start/end: accent fills, range days lighter accent
- Disabled: greyed out, not interactive
Tokens
spacing
dayCellSize: 36pxpanelPadding: 16pxpanelWidth: 280px
Do
- Also allow direct text input for power users — don't make calendar the only entry method
- Show the day of week — helps users confirm the correct date
- Disable past dates when they're invalid (e.g., future-only booking)
- For ranges: show both start and end in the trigger input
Don't
- Build a date picker from scratch — use a well-tested library (react-day-picker, etc.)
- Use date picker for year-only or month-only selection — use dropdowns
- Open calendar on mobile keyboard focus — use a native date input on mobile
- Require users to navigate month-by-month to reach dates far in the future
Accessibility
- Trigger: aria-haspopup="dialog" and aria-expanded
- Calendar: role="dialog" with aria-label="Choose date"
- Day cells: role="gridcell", aria-label="August 15, 2026"
- Arrow keys navigate days; Enter selects; Escape closes
- Selected date: aria-selected="true"