Date range picker
A calendar (usually two months side by side) where you click a start date and an end date to select everything between.
See it
What it is
The control you meet on booking sites and analytics dashboards: click a start date, click an end date, and everything between fills in. Two months render side by side so a range crossing a month boundary needs no paging, and after the first click the hover state previews the range live. A rail of presets (Today, Last 7 days, This month) usually sits beside the calendar, because most people want a common window rather than an arbitrary one.
Reach for it on any filter over time. If the presets cover 90 percent of real usage, lead with them and treat the calendar as the escape hatch rather than the main event.
These break on their state machine. A range has three states (nothing picked, start picked, both picked), the second click can land before the first (swap them, do not reject the click), and clicking again on a completed range should start a fresh one instead of nudging an edge. Time zones are the second trap: 'last 7 days' computed in UTC for a user in Sydney quietly loses a day at both ends, so build ranges in the display time zone. Then store the right kind of value. If the range is made of calendar days (booking nights, a billing month, a report window), keep it as plain ISO dates like '2026-06-12' or a Temporal.PlainDate, because pushing a date-only value through a UTC instant and back will happily hand it to someone as the day before. Store instants only when the ends really are exact moments, like a log query or an event window.
Ask AI for it
Build a date range picker: a trigger button showing the formatted range ('12 Jun 2026 to 19 Jun 2026', or 'Select dates' when empty) that opens a popover containing two months side by side with previous and next arrows, plus a left rail of presets (Today, Yesterday, Last 7 days, Last 30 days, This month, Last month). Track three selection states: empty, start-only, and complete. The first click sets the start, hovering then previews the candidate range as a tinted band, the second click sets the end and swaps the two if it falls earlier, and a click on a completed range starts over. Render the start and end days as filled rounded caps with the days between lightly tinted, disable dates outside min and max, support arrow-key navigation with Enter to select and Escape to close, and put Clear and Apply buttons in the footer. Keep the selected range in state as plain ISO calendar dates ('2026-06-12'), never as UTC instants, so a date cannot shift by a day across time zones.