Adobe Spectrum - DateRangePicker
DateRangePicker - Adobe Spectrum

DateRangePicker

A date range picker combines two DateFields and a RangeCalendar popover to allow users to enter or select a date and time range.

Basic Example
MM / DD / YYYY
–
MM / DD / YYYY

January 2024

Su
Mo
Tu
We
Th
Fr
Sa
With Validation
MM / DD / YYYY
–
MM / DD / YYYY
Please select a valid date range.
With Help Text
MM / DD / YYYY
–
MM / DD / YYYY
Select your preferred vacation dates.

Features

  • Dates and times – Support for dates and times with configurable granularity
  • International – Support for 13 calendar systems and locale-specific formatting
  • Time zone aware – Dates and times can optionally include a time zone
  • Accessible – Each date segment is individually focusable and editable
  • Touch friendly – Date segments are editable using numeric keypad
  • Validation – Integrates with HTML forms and supports custom validation
  • Customizable – Full control over DOM structure and styling

Composed Components

Label

Provides context for the date range picker

DateField

Allows keyboard entry and editing of dates

Button

Opens the calendar popover

Popover

Contains the calendar in an overlay

Dialog

Wraps the calendar for accessibility

RangeCalendar

Visual calendar for selecting date ranges

Interactive Examples

Time Zone Support
01 / 15 / 2024 , 09 : 00 AM
–
01 / 15 / 2024 , 05 : 00 PM
Granularity Control
MM / DD / YYYY
–
MM / DD / YYYY