Skip to main content

Selection Modes

DayPicker comes with some predefined rules for selecting days:

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

Prop NameTypeDescription
mode"single" | "multiple" | "range" | "none"Set a selection mode. Default is "none".
disabledMatcher | 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 NameTypeDescription
selectedDate | undefinedThe selected date.
onSelectSelectSingleEventHandlerEvent callback when a date is selected.
requiredbooleanMake 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}
/>
);
}
SuMoTuWeThFrSa

Required Selection

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

SuMoTuWeThFrSa
<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 NameTypeDescription
selectedDate[] | undefinedThe selected dates.
onSelectSelectMultipleEventHandlerEvent callback when a date is selected.
minnumberThe minimum dates that can be selected.
maxnumberThe 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 || [])}
/>
);
}
SuMoTuWeThFrSa

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 ?? [])}
/>
);
}
SuMoTuWeThFrSa

Range Mode

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

<DayPicker mode="range" />
Prop NameTypeDescription
selectedDateRangeThe selected range.
onSelectSelectRangeEventHandlerEvent callback when a date is selected.
minnumberThe minimum dates that can be selected.
maxnumberThe 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} />;
}
SuMoTuWeThFrSa

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}
/>
);
}
SuMoTuWeThFrSa

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.

SuMoTuWeThFrSa

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

Custom Mode