File size: 2,334 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 | ---
sidebar_position: 3
---
# Multiple Mode
Set the `mode` prop to `"multiple"` to enable the selection of multiple dates in DayPicker.
```tsx
<DayPicker mode="multiple" />
```
<BrowserWindow sourceUrl="https://github.com/gpbl/react-day-picker/blob/main/examples/Multiple.tsx">
<Examples.Multiple />
</BrowserWindow>
## Multiple Mode Props
| Prop Name | Type | Description |
| ---------- | -------------------------------------------------------------------------------- | ------------------------------------------------- |
| `selected` | `Date[] \| undefined` | The selected dates. |
| `onSelect` | [`OnSelectHandler<Date[] \| undefined>`](../api/type-aliases/OnSelectHandler.md) | Event callback when a date is selected. |
| `min` | `number` | The minimum number of dates that can be selected. |
| `max` | `number` | The maximum number of dates that can be selected. |
| `required` | `boolean` | Make the selection required. |
Use the `selected` and `onSelect` props to manage the selected dates:
```tsx
export function App() {
const [selected, setSelected] = React.useState<Date[] | undefined>();
return (
<DayPicker mode="multiple" selected={selected} onSelect={setSelected} />
);
}
```
## Min and Max Dates
Use the `min` and `max` props to limit the number of selectable dates.
```tsx
<DayPicker mode="multiple" min={2} max={5} />
```
<BrowserWindow sourceUrl="https://github.com/gpbl/react-day-picker/blob/main/examples/MultipleMinMax.tsx">
<Examples.MultipleMinMax />
</BrowserWindow>
## Required Selection
By setting the `required` prop, DayPicker ensures that the selected dates cannot be unselected.
```tsx
<DayPicker mode="multiple" required selected={[new Date()]} />
```
<BrowserWindow sourceUrl="https://github.com/gpbl/react-day-picker/blob/main/examples/MultipleRequired.tsx">
<Examples.MultipleRequired />
</BrowserWindow>
|