Skip to main content

Selecting Days

DayPicker supports 3 built-in selection modes to display days as selected. Enable a selection mode by setting the mode prop.

  • Single mode mode="single": only a single day can be selected
  • Multiple mode mode="multiple": allow selection of multiple days
  • Range mode mode="range": allow the selection of range of days

Single Selections​

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

|
import React, { useState } from 'react';

import { format } from 'date-fns';
import { DayPicker } from 'react-day-picker';

export default function App() {
const [selectedDay, setSelectedDay] = useState<Date>();

const footer = selectedDay ? (
<p>You selected {format(selectedDay, 'PPP')}.</p>
) : (
<p>Please pick a day.</p>
);

return (
<DayPicker
mode="single"
selected={selectedDay}
onSelect={setSelectedDay}
footer={footer}
/>
);
}

Making a selection required​

To make a selection required, use defautSelected with required.

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

|
import React, { useState } from 'react';

import { format } from 'date-fns';
import { DayPicker } from 'react-day-picker';

export default function App() {
const today = new Date();
const [selectedDay, setSelectedDay] = useState<Date | undefined>(today);

const footer = selectedDay ? (
<p>You selected {format(selectedDay, 'PPP')}.</p>
) : (
<p>Please pick a day.</p>
);

return (
<DayPicker
mode="single"
required
selected={selectedDay}
onSelect={setSelectedDay}
footer={footer}
/>
);
}

Selecting Multiple Days​

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

|
import React from 'react';

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

export default function App() {
const initialDays: Date[] = [];
const [days, setDays] = React.useState<Date[] | undefined>(initialDays);

const footer =
days && days.length > 0 ? (
<p>You selected {days.length} day(s).</p>
) : (
<p>Please pick one or more days.</p>
);

return (
<DayPicker
mode="multiple"
min={1}
selected={days}
onSelect={setDays}
footer={footer}
/>
);
}

Limiting the selectable days​

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

|
import React from 'react';

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

export default function App() {
const [days, setDays] = React.useState<Date[]>();

const footer =
days && days.length > 0 ? (
<p>You selected {days.length} day(s).</p>
) : (
<p>Please pick one or more days.</p>
);

return (
<DayPicker
mode="multiple"
min={2}
max={5}
selected={days}
onSelect={setDays}
footer={footer}
/>
);
}

Selecting a Range of days​

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

|
import React, { useState } from 'react';

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

const pastMonth = new Date(2020, 10, 15);

export default function App() {
const defaultSelected: DateRange = {
from: pastMonth,
to: addDays(pastMonth, 4)
};
const [range, setRange] = useState<DateRange | undefined>(defaultSelected);

let footer = <p>Please pick the first day.</p>;
if (range?.from) {
if (!range.to) {
footer = <p>{format(range.from, 'PPP')}</p>;
} else if (range.to) {
footer = (
<p>
{format(range.from, 'PPP')}–{format(range.to, 'PPP')}
</p>
);
}
}

return (
<DayPicker
mode="range"
defaultMonth={pastMonth}
selected={range}
footer={footer}
onSelect={setRange}
/>
);
}

Limiting the range size​

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

|
import React, { useState } from 'react';

import { format } from 'date-fns';
import { DateRange, DayPicker } from 'react-day-picker';

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

let footer = <p>Please pick the first day.</p>;
if (range?.from) {
if (!range.to) {
footer = <p>{format(range.from, 'PPP')}</p>;
} else if (range.to) {
footer = (
<p>
{format(range.from, 'PPP')}–{format(range.to, 'PPP')}
</p>
);
}
}

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

Custom Selections​

If the built-in selection modes are not enough for your app’s requirements, you can control the selection behavior using onDayClick.

For example, to implement the "single selection" behavior (like when mode="single"):

|
import React, { useState } from 'react';

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

export default function App() {
const [selectedDay, setSelectedDay] = useState<Date>();
const handleDayClick = (day: Date) => setSelectedDay(day);

const footer = selectedDay ? (
<p>You selected {selectedDay.toDateString()}.</p>
) : (
<p>Please pick a day.</p>
);

return (
<DayPicker
selected={selectedDay}
onDayClick={handleDayClick}
footer={footer}
/>
);
}

Example: custom multiple select​

The case of a multi-days select is a bit more complex as it deals with an array. The following example replicates the mode="multiple" selection mode.

|
import React, { useState } from 'react';

import { DayClickEventHandler, DayPicker } from 'react-day-picker';

export default function App() {
const [selectedDays, setSelectedDays] = useState<Date[]>([]);

const handleDayClick: DayClickEventHandler = (day, modifiers) => {
setSelectedDays((currentValue) => {
const days = [...currentValue];
if (modifiers.selected) {
days.splice(currentValue.indexOf(day), 1);
} else {
days.push(day);
}
return days;
});
};

const handleResetClick = () => setSelectedDays([]);

let footer = <p>Please pick one or more days.</p>;

if (selectedDays.length > 0)
footer = (
<p>
You selected {selectedDays.length} days.{' '}
<button onClick={handleResetClick}>Reset</button>
</p>
);

return (
<DayPicker
onDayClick={handleDayClick}
selected={selectedDays}
footer={footer}
/>
);
}