Date Range Picker
Two months side by side, hover to preview the range, presets on the left.
IntermediateWeb appUI component12–24hAI-buildable 4/5no setup
The date range picker is a rite of passage. Two-month view, hover preview of the range being selected, presets, min and max constraints, and full keyboard operation. Deceptively deep, and you will need one in almost every app you build afterwards.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Two months display side by side with month navigation
- Clicking a start then end date selects the range
- Hovering previews the range before the second click
- Preset ranges like last 7 days and this month
- Minimum and maximum selectable dates are enforced
- Full keyboard navigation including arrow keys between days
- Selecting an end date before the start swaps them rather than failing
The interesting part
- Keyboard grid navigation across month boundaries
- Announcing the selected range to screen readers as it changes
- Month boundary and leap year edge cases
Once it works
- Add time-of-day selection
- Add a comparison range for period-over-period
- Collapse to a single month on narrow screens
Suggested stack
reacttypescripttailwinddate-fns