File size: 3,058 Bytes
cf86710 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | ---
sidebar_position: 4
---
# Range Mode
Set the `mode` prop to `"range"` to enable the selection of a continuous range of dates in DayPicker.
```tsx
<DayPicker mode="range" />
```
<BrowserWindow sourceUrl="https://github.com/gpbl/react-day-picker/blob/main/examples/Range.tsx">
<Examples.Range />
</BrowserWindow>
## Range Mode Props
| Prop Name | Type | Description |
| ----------------- | ----------------------------------------------------------------------------------- | ------------------------------------------ |
| `selected` | [`DateRange`](../api/type-aliases/DateRange.md) | The selected range. |
| `onSelect` | [`OnSelectHandler<DateRange \| undefined>`](../api/type-aliases/OnSelectHandler.md) | Event callback when a date is selected. |
| `required` | `boolean` | Make the selection required. |
| `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.
```tsx
<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 />
</BrowserWindow>
## Required Ranges
By setting the `required` prop, DayPicker ensures that the selected range cannot be unselected.
```tsx
<DayPicker mode="range" required />
```
<BrowserWindow sourceUrl="https://github.com/gpbl/react-day-picker/blob/main/examples/RangeRequired.tsx">
<Examples.RangeRequired />
</BrowserWindow>
## 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.
```tsx
<DayPicker
mode="range"
// Disable weekends
disabled={{ dayOfWeek: [0, 6] }}
// Reset range when a disabled date is included
excludeDisabled
/>
```
<BrowserWindow sourceUrl="https://github.com/gpbl/react-day-picker/blob/main/examples/RangeExcludeDisabled.tsx">
<Examples.RangeExcludeDisabled />
</BrowserWindow>
|