Range Mode

Set the mode prop to "range" to enable the selection of a continuous range of dates in DayPicker.

<DayPicker mode="range" />

Range Mode Props

Prop Name	Type	Description
selected	DateRange	The selected range.
onSelect	OnSelectHandler<DateRange | undefined>	Event callback when a date is selected.
required	boolean	Make the selection required.
resetOnSelect	boolean	Start a new range after a completed one.
min	number	The minimum number of nights in the range.
max	number	The maximum number of nights in the range.
excludeDisabled	boolean	Exclude disabled dates from the range.

Min and Max Dates

By default, a range can have a length of 0 nights, meaning the start date can be the same as the end date. Use the min prop to set the minimum number of nights. The range will remain "open" until at least the min number of nights are selected.

Similarly, use the max prop to set the maximum number of nights.

<DayPicker mode="range" min={1} max={6} />

<BrowserWindow bodyStyle={{ justifyContent: "start" }} sourceUrl="https://github.com/gpbl/react-day-picker/blob/main/examples/RangeMinMax.tsx"

<Examples.RangeMinMax />

Required Ranges

By setting the required prop, DayPicker ensures that the selected range cannot be unselected.

<DayPicker mode="range" required />

Reset Range On Select {#reset-selection}

By default, once a range is complete, clicking another day updates the current from or to. Use resetOnSelect to start a new range when there is no current start date or when a full range is already selected. In those cases, the clicked day becomes from, to is cleared, and the next click completes the range.

<DayPicker mode="range" resetOnSelect />

Excluding Disabled Dates {#exclude-disabled}

In range mode, disabled dates are included in the selected range by default. To exclude disabled dates from the range, use the excludeDisabled prop. If a disabled date is selected, the range will reset.

<DayPicker
  mode="range"
  // Disable weekends
  disabled={{ dayOfWeek: [0, 6] }}
  // Reset range when a disabled date is included
  excludeDisabled
/>