Selection Modes

DayPicker offers predefined rules for date selection:

• Single mode: Allows the selection of a single date.
• Multiple mode: Allows the selection of multiple individual dates.
• Range mode: Allows the selection of a continuous range of dates.

The mode prop determines the selection mode. Use the disabled prop to prevent the selection of specific dates. 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 dates that cannot be selected.
selected	Date | Date[] | DateRange | undefined	The selected date(s).
required	boolean (MDN)	When true, the selection is required.
onSelect	OnSelectHandler	Event callback when a date is selected.

Single Mode

When the mode prop is set to "single", only one date can be selected at a time.

<DayPicker mode="single" />

Single Mode Props

Prop Name	Type	Description
selected	Date | undefined (MDN)	The selected date.
onSelect	OnSelectHandler<Date | undefined>	Event callback when a date is selected.
required	boolean	Make the selection required.

Controlled Selections

Use the selected and onSelect props to control 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 />

Multiple Mode

Set the mode prop to "multiple" to enable the selection of multiple dates in DayPicker.

<DayPicker mode="multiple" />

Multiple Mode Props

Prop Name	Type	Description
selected	Date[] | undefined	The selected dates.
onSelect	OnSelectHandler<Date[] | undefined>	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:

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

Required Selection

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

<DayPicker mode="multiple" required selected={[new Date()]} />

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.
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} />

Required Ranges

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

<DayPicker mode="range" required />

Disabling Dates

To disable specific dates, use the disabled prop. Disabled dates cannot be selected.

Matchers Types

The prop accepts a Matcher or an array of matchers to specify which dates should be disabled.

Matcher Type	Description
boolean	Disable all dates.
Date	Matches a specific date.
Date[]	Matches any date in the array of dates.
DateRange	Matches a range of dates, including the start and end dates.
DateBefore	Matches all dates before a specific date (exclusive).
DateAfter	Matches all dates after a specific date (exclusive).
DateInterval	Matches dates between two dates (exclusive of the start and end dates).
DayOfWeek	Matches specific days of the week (e.g., Sunday is 0, Saturday is 6).
(date: Date) => boolean	A function that returns true if the given date matches the condition.
Matcher[]	An array of the matchers listed above.

// Disable all dates
<DayPicker disabled />

// Disable a specific date
<DayPicker disabled={new Date(2023, 9, 1)} />

// Disable an array of dates
<DayPicker disabled={[new Date(2023, 9, 1), new Date(2023, 9, 2)]} />

// Disable a range of dates
<DayPicker disabled={{ from: new Date(2023, 9, 1), to: new Date(2023, 9, 5) }} />

// Disable specific days of the week
<DayPicker disabled={{ dayOfWeek: [0, 6] }} /> // disable weekends

// Disable dates before a specific date
<DayPicker disabled={{ before: new Date(2023, 9, 1) }} />

// Disable dates after a specific date
<DayPicker disabled={{ after: new Date(2023, 9, 5) }} />

// Disable dates between two dates
<DayPicker disabled={{ before: new Date(2023, 9, 1), after: new Date(2023, 9, 5) }} />

Disabling Weekends

To disable weekends, use the dayOfWeek matcher, where 0 is Sunday and 6 is Saturday.

<DayPicker disabled={{ dayOfWeek: [0, 6] }} />

Disabling Dates in the Past

Use the before matcher to disable all dates before today.

<DayPicker mode="single" disabled={{ before: new Date() }} />

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

Customizing Selections

To customize the behavior of a selection mode, use the selected 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.