Skip to main content

Selecting Days

DayPicker supports four selection modes:

  • single mode: only a single day can be selected
  • multiple mode: allow selection of multiple days
  • range mode: allow the selection of range of days
  • uncontrolled: let the parent component handle the selection

Single selection mode#

To enable single day selection, set mode="single" and use onSelect to get the selected day.

import * as React from 'react';
import { format } from 'date-fns';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
const [selectedDay, setSelectedDay] = React.useState<Date>();
const footer = selectedDay
? `You selected ${format(selectedDay, 'PPP')}.`
: `Please pick a day.`;
return <DayPicker mode="single" onSelect={setSelectedDay} footer={footer} />;
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
Please pick a day.

Making a selection required#

To make a selection required, use defautSelected with required.

For example, to set the default selected date to today:

import * as React from 'react';
import { format } from 'date-fns';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
const today = new Date();
export default function Example() {
const [selectedDay, setSelectedDay] = React.useState(today);
const footer = selectedDay
? `You selected ${format(selectedDay, 'PPP')}.`
: `Please pick a day.`;
return (
<DayPicker
mode="single"
required
defaultSelected={selectedDay}
onSelect={setSelectedDay}
footer={footer}
/>
);
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
You selected March 25th, 2021.

Selecting multiple days#

Use mode="multiple" to allow the selection of multiple days:

import * as React from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
const defaultSelected: Date[] = [];
const [days, setDays] = React.useState(defaultSelected);
const footer =
days.length > 0
? `You picked ${days.length} day(s).`
: `Please pick one or more days.`;
return <DayPicker mode="multiple" onSelect={setDays} footer={footer} />;
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
Please pick one or more days.

Limiting the amount of selectable days#

Use the min and max props to limit the amount of days that can be selected.

import * as React from 'react';
import { addDays } from 'date-fns';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
const defaultSelected: Date[] = [
addDays(new Date(), 1),
addDays(new Date(), 2)
];
const [days, setDays] = React.useState(defaultSelected);
const footer =
days.length > 0
? `You picked ${days.length} day(s).`
: `Please pick one or more days.`;
return (
<DayPicker
mode="multiple"
min={2}
max={5}
defaultSelected={defaultSelected}
onSelect={setDays}
footer={footer}
/>
);
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
You picked 2 day(s).

Selecting a range of days#

Use mode="range" and onSelectRange to allow the selection of multiple days.

import * as React from 'react';
import { addDays, format } from 'date-fns';
import { DateRange, DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
const defaultSelected: DateRange = {
from: new Date(),
to: addDays(new Date(), 4)
};
const [range, setRange] = React.useState(defaultSelected);
let footer = 'Please pick the first day.';
if (range.from && !range.to) footer = 'Please pick the last day.';
if (range.from && range.to)
footer = `${format(range.from, 'PPP')}–${format(range.to, 'PPP')}`;
return (
<DayPicker
mode="range"
defaultSelected={defaultSelected}
footer={footer}
onSelect={setRange}
/>
);
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
March 25th, 2021–March 29th, 2021

Limiting the range size#

Use the min and max props to limit the amount of days in the range.

import * as React from 'react';
import { format } from 'date-fns';
import { DateRange, DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
const [range, setRange] = React.useState<DateRange | undefined>();
let footer = 'Please pick the first day.';
if (range && range.from && !range.to) footer = 'Please pick the last day.';
if (range && range.from && range.to)
footer = `${format(range.from, 'PPP')}–${format(range.to, 'PPP')}`;
return (
<DayPicker
mode="range"
min={1}
max={5}
onSelect={setRange}
footer={footer}
/>
);
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
Please pick the first day.

Uncontrolled selection mode#

If the built-in selection modes are not enough for your app’s requirements, you can control the selection behavior using mode="uncontrolled". See the Custom Selections guide for more details.