Skip to main content

Range Mode

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

<DayPicker mode="range" />
View source

Range Mode Props​

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} />
View source

Required Ranges​

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

<DayPicker mode="range" required />
View source

Reset Range On Select​

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 />
View source

Excluding Disabled Dates​

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
/>
View source