Date & time pickers

Single dates, ranges, and the accessibility minefield in between. One of the few components teams still buy rather than build.

Also appears as: DatePicker · DateRangePicker · Date Input · Date Range Picker

5 systems with a documented take

Airbnb DLS
Airbnb
DateRangePicker
Calendar component with availability, minimum-stay, and price-per-night overlay — the reference for travel booking.
Read the Airbnb DLS breakdown
Backpack
Skyscanner
Date Range Picker
Travel-grade calendar with availability, minimum-stay, price-per-night overlay, and locale-aware month navigation.
Read the Backpack breakdown
GOV.UK Design System
UK Government
Date input
Three-field date input that handles keyboard, locale, and validation correctly.
Read the GOV.UK Design System breakdown
MUI (Material UI)
MUI
DatePicker (MUI X)
Localized, accessible date picker with range support.
Read the MUI (Material UI) breakdown
NHS Design System
National Health Service
Date Input
Three-input date field (day / month / year) optimized for accessibility and slow connections — works without JavaScript.
Read the NHS Design System breakdown