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

September 2024

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

September 2024

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

September 2024

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

September 2024

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()]} />

September 2024

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

June 2020

Su	Mo	Tu	We	Th	Fr	Sa

June 15th, 2020–June 19th, 2020

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.

September 2024

Su	Mo	Tu	We	Th	Fr	Sa

Please pick the first day.

Required Ranges

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

<DayPicker mode="range" required />

September 2024

Su	Mo	Tu	We	Th	Fr	Sa

September 1st, 2024—September 5th, 2024

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

September 2024

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

September 2024

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.