Selection Modes
DayPicker offers predefined rules for day selection:
- Single mode: Allows the selection of a single day.
- Multiple mode: Enables the selection of multiple individual days.
- Range mode: Allows the selection of a continuous range of days.
The mode
prop determines the selection mode. Use the disabled
prop to prevent the selection of specific days. The selected
and onSelect
props provide customization options for the selection process.
Prop Name | Type | Description |
---|---|---|
mode | "single" | "multiple" | "range" | Enter a selection mode. |
disabled | Matcher | Matcher[] | Disabled days that cannot be selected. |
selected | Date | Date[] | DateRange | undefined | The selected day(s). |
required | boolean | When true , the selection is required. |
onSelect | (selected, triggerDate, modifiers, e) => void | Event callback when a date is selected. |
Single Modeβ
When the mode
prop is set to "single"
, only one day can be selected at a time.
<DayPicker mode="single" />
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Single Mode Propsβ
Prop Name | Type | Description |
---|---|---|
selected | Date | undefined | The selected date. |
onSelect | (selected, triggerDate, modifiers, e) => void | Event callback when a date is selected. |
required | boolean | Make the selection required. |
Use the selected
and onSelect
props to manage the selected date:
export function App() {
const [selected, setSelected] = React.useState<Date | undefined>();
return <DayPicker mode="single" selected={selected} onSelect={setSelected} />;
}
Required Selectionβ
By setting the required
prop, DayPicker ensures that the user cannot unselect the selected date.
<DayPicker mode="single" required />
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Multiple Modeβ
Set the mode
prop to "multiple"
to enable the selection of multiple days in DayPicker.
<DayPicker mode="multiple" />
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Multiple Mode Propsβ
Prop Name | Type | Description |
---|---|---|
selected | Date[] | undefined | The selected dates. |
onSelect | (selected, date, modifiers, e) => void | Event callback when a date is selected. |
min | number | The minimum dates that can be selected. |
max | number | The maximum dates that can be selected. |
required | boolean | Make the selection required. |
Use the selected
and onSelect
props to manage the selected date:
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.
<DayPicker mode="multiple" min={2} max={5} />
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Required Selectionβ
By setting the required
prop, DayPicker ensures that the selected dates cannot be unselected.
<DayPicker mode="multiple" required selected={[new Date()]} />
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Range Modeβ
Set the mode
prop to "range"
to enable the selection of a continuous range of dates in DayPicker.
<DayPicker mode="range" />
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Range Mode Propsβ
Prop Name | Type | Description |
---|---|---|
selected | DateRange | The selected range. |
onSelect | (selected, triggerDate, modifiers, e) => void | Event callback when a date is selected. |
required | boolean | Make the selection required. |
min | number | The minimum dates that can be selected. |
max | number | The maximum dates that can be selected. |
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} />
Select up to 6 nights.
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Required Rangesβ
By setting the required
prop, DayPicker ensures that the selected range cannot be unselected.
<DayPicker mode="range" required />
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Disabling Datesβ
To disable specific days, use the disabled
prop. Disabled dates cannot be selected.
The prop accepts a Matcher
or an array of matchers to specify which days should be disabled.
// disable today
<DayPicker mode="single" disabled={ new Date() } />
// disable weekends
<DayPicker mode="range" disabled={{ dayOfWeek: [0, 6] }} />
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Excluding Disabled Dates from Rangeβ
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
/>
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Customizing Selectionsβ
To customize the behavior of a selection mode, use the select
and onSelect
props to handle the selection event and update the selected dates according to your application's requirements:
import { useState } from "react";
import { DayPicker } from "react-day-picker";
export function App() {
const [selected, setSelected] = useState<Date[] | undefined>();
const handleSelect = (newSelected) => {
// Update the selected dates
setSelected(newSelected);
};
return (
<DayPicker mode="multiple" selected={selected} onSelect={handleSelect} />
);
}
You can also set the selection mode to default
and implement your own mode using modifiers
and onDayClick
. For more information, read the Custom Selections guide.