Back to Forms & Inputs
Date Range Picker
A calendar for picking a start–end span — solid endpoint dots joined by a soft primary band, with a live hover preview while the end date is still being chosen.
July 2026
SMTWTFS
Forms & Inputsdaterangecalendarbooking
Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.
Dependencies: lucide-react
Overview
Range band
bg-primary/10 strip through in-range cells; endpoints solid bg-primary
Hover preview
Start picked + no end → band follows the hovered day live
Backwards pick
Clicking before the start swaps, never errors or resets
Band trick
Band paints the full-width cell wrapper, dot paints the button