Date range picker

A date range picker is one calendar answering two questions at once. The first press sets the start, the second sets the end, and between them the grid previews the span under the pointer so the reader can see the shape of the booking before committing to it. That preview is the whole reason the component exists: a range typed into two separate fields is a pair of dates, while a range painted across a month is a duration you can judge at a glance, weekends and all.

The craft is in the second press. The two dates have an order, so the picker either swaps them when the reader picks backwards or restarts the range from the new date, and it has to pick one rule and keep it. Beyond that sit the constraints a single date never has: a minimum and maximum length, blackout days that a span may not cross, nights versus days (a hotel stay of three nights touches four dates), and a second month drawn beside the first so a span that crosses a month boundary can be made without paging. Presets carry most of the real traffic, since “last 7 days” and “this quarter” are what people actually want from a report filter, and they belong beside the grid rather than inside it. Whatever is chosen has to be said in words too: a screen reader user needs “6 April to 13 April, 8 days” announced, not two selected cells they have to reconstruct.

The rest of the family divides cleanly. A date picker takes one date and closes; a calendar is the month grid itself, which both pickers embed and which can also stand alone as a display; a time picker takes a time of day, and pairing one with each end of a range is how a booking gets its check-in and check-out hours. A range of numbers rather than dates is a range slider, which shares the two-handle idea and none of the calendar. When the span is nearly always one of a handful of stock answers, a select of presets with a range picker behind a “Custom” option is lighter than a grid nobody opens.