Date Range

Select a range between two dates

What it solves

A Date Range component allows users to select both a start date and an end date, defining a continuous period of time. It extends the Date Picker pattern by introducing range visualization — highlighting the days between the two selected dates — and range-specific validation (end date must be after start date, minimum/maximum range length). Date Range is commonly implemented as either a dual input pair (two separate date fields with connected validation) or a single calendar panel/dual-panel UI with visual range highlighting as the user selects. start, minimum/maximum range enforcement, and accessible announcement of both selected dates." />

When to use

• Hotel/travel booking – Check-in and check-out date selection.
• Event duration – Start and end dates for an event or campaign.
• Reporting periods – Date filters for analytics dashboards ("Last 7 days", custom range).
• Rental and reservation systems – Car rental, equipment rental periods.
• Leave and time-off requests – Vacation date selection with minimum/maximum days.