Selection Modes

DayPicker comes with some predefined rules for selecting days:

• Single mode: only one day can be selected.
• Multiple mode: select multiple days.
• Range mode: select a continuous range of days.
• Create custom selection rules for more complex scenarios.

To make days selectable, set the mode prop. Disallow the selection of specific days by using the disabled prop.

Prop Name	Type	Description
mode	"single" | "multiple" | "range" | "none"	Set a selection mode. Default is "none".
disabled	Matcher | Matcher[]	Disabled days that cannot be selected.

Single Mode

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

<DayPicker mode="single" />

Prop Name	Type	Description
selected	Date | undefined	The selected date.
onSelect	SelectSingleEventHandler	Event callback when a date is selected.
required	boolean	Make the selection required.

The following code snippet will render a date picker with a single selected date. When a day is clicked, the selectedDate state is updated.

import { useState } from "react";

import { DayPicker } from "react-day-picker";

export function App() {
  const initiallySelectedDate = new Date();
  const [selectedDate, setSelectedDate] = useState(initiallySelectedDate);
  return (
    <DayPicker
      mode="single"
      selected={selectedDate}
      onSelect={setSelectedDate}
    />
  );
}

September 2024

Su	Mo	Tu	We	Th	Fr	Sa

Required Selection

By setting the required prop, DayPicker won't allow the user to unselect the selected date.

September 2024

Su	Mo	Tu	We	Th	Fr	Sa

<DayPicker
  mode="single"
  selected={selectedDate}
  onSelect={setSelectedDate}
  required // A date must be selected
/>

Multiple Mode

By setting the mode prop to "multiple", DayPicker allows selecting multiple days.

<DayPicker mode="multiple" />

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

import { useState } from "react";

import { DayPicker } from "react-day-picker";

export function App() {
  const initiallySelectedDates = [new Date(), addDays(new Date(), 1)];

  const [selectedDates, setSelectedDates] = useState<Date[]>([]);

  return (
    <DayPicker
      mode="multiple"
      selected={selectedDates}
      onSelect={(dates) => setSelectedDates(dates || [])}
    />
  );
}

September 2024

Su	Mo	Tu	We	Th	Fr	Sa

Min and Max Dates

Use the min and max props to limit the number of selectable dates.

import { useState } from "react";

import { DayPicker } from "react-day-picker";

export function App() {
  const initiallySelectedDates = [new Date(), addDays(new Date(), 1)];
  const [selected, setSelected] = useState(initiallySelectedDates);
  return (
    <DayPicker
      mode="multiple"
      min={2} // At least 2 dates must be selected
      max={5} // Maximum 5 dates can be selected
      selected={selected}
      onSelect={(dates) => setSelected(dates ?? [])}
    />
  );
}

September 2024

Su	Mo	Tu	We	Th	Fr	Sa

Range Mode

When the mode prop is set to "range", DayPicker allows selecting a continuous range of dates.

<DayPicker mode="range" />

Prop Name	Type	Description
selected	DateRange	The selected range.
onSelect	SelectRangeEventHandler	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.

import { useState } from "react";

import { addDays } from "date-fns";
import { DateRange, DayPicker } from "react-day-picker";

export function Range() {
  const initialRange: DateRange = {
    from: new Date(),
    to: addDays(new Date(), 4)
  };

  const [range, setRange] = useState<DateRange | undefined>(initialRange);

  return <DayPicker mode="range" selected={range} onSelect={setRange} />;
}

September 2022

Su	Mo	Tu	We	Th	Fr	Sa
Please pick the first day.

Min and Max Dates

Also in range mode, you can set the min and max props to limit the number of selectable dates.

import { useState } from "react";

import { DateRange, DayPicker } from "react-day-picker";

export function RangeMinMax() {
  const [range, setRange] = useState<DateRange | undefined>();

  return (
    <DayPicker
      defaultMonth={new Date(2022, 8)}
      mode="range"
      min={3}
      max={6}
      selected={range}
      onSelect={setRange}
    />
  );
}

September 2022

Su	Mo	Tu	We	Th	Fr	Sa
Please pick the first day.

Shift Key

The following DayPicker requires the Shift key to select a range of dates. See examples/RangeShiftKey.tsx for the full source code.

September 2024

Su	Mo	Tu	We	Th	Fr	Sa
Please pick a day.

Disabling Dates

To disable specific days, use the disabled prop. The prop accepts a Matcher or an array of matchers that can be used to make some days not selectable.

<DayPicker
  mode="single"
  disabled={{ daysOfWeek: [0, 6] }} // Disable Sundays and Saturdays
/>

June 2024

Su	Mo	Tu	We	Th	Fr	Sa

Custom Mode

• See the Custom Selections guide to create custom selection modes.