Date Range Selection

Select a date range with visual highlighting between start and end dates.

Live Example

Code Breakdown

Range Selection Mode

Use selectionMode="range" to enable range selection:

<DatePicker
  selectionMode="range"
  startDate={range.startDate}
  endDate={range.endDate}
  onRangeChange={setRange}
  weekStartsOn={0}
  themeOverrides={pickerTheme}
/>

Range State

The onRangeChange callback receives an object with startDate and endDate:

const [range, setRange] = useState({
  startDate: new Date(),
  endDate: null,
});

Selection UX

1. First tap sets the start date
2. Second tap sets the end date (if after start)
3. Tapping before start resets to new start
4. Dates between are visually highlighted

With Disabled Dates

Next Steps

• TimePicker iOS - iOS-style wheel time picker
• TimePicker Material - Material Design clock picker