Skip to main content

Custom Selections

In the Selecting Days tutorial. we have set different modes to change the selection behavior. Under the hood, DayPicker handles the interaction with the days, assigning them the selected modifier.

To implement a selection behavior by yourself, you can either switch to uncontrolled selection mode or – to keep the built-in modes – use a custom Day component.

Switching to the uncontrolled mode#

  1. set the selection mode to mode="uncontrolled"
  2. store the selected dates in the parent’s state
  3. use the selected and onDayClick props

Example: multiple select#

import * as React from 'react';
import { DayClickEventHandler, DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
const [selectedDays, setSelectedDays] = React.useState([]);
const handleDayClick: DayClickEventHandler = (day, { selected }) => {
// Use a callback to clone and add / remove days to the array
setSelectedDays((currentlySelectedDays) => {
const days = [...currentlySelectedDays];
if (selected) {
days.splice(currentlySelectedDays.indexOf(day), 1);
} else {
days.push(day);
}
return days;
});
};
const handleResetClick = () => setSelectedDays([]);
const footer =
selectedDays.length === 0 ? (
'Please pick one or more days.'
) : (
<p>
You selected {selectedDays.length} days.{' '}
<button onClick={handleResetClick}>Reset</button>
</p>
);
return (
<DayPicker
mode="uncontrolled"
onDayClick={handleDayClick}
selected={selectedDays}
footer={footer}
/>
);
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
Please pick one or more days.

Using a custom Day component#

To refine how the selection works when interacting with the day, you can use a custom Day component to extend the built-in selection modes.

DayPicker includes a useDay hook useful for creating a custom Day component.

  1. create a new Day component following the useDay requirements
  2. pass the new component to the components prop

Example: range selections with shift key#

The following example implements a DayPicker that allows selecting ranges only when the user is pressing the Shift key while clicking a day.

import * as React from 'react';
import { Button, DayPicker, DayProps, useDay } from 'react-day-picker';
import 'react-day-picker/style.css';
/**
* A custom `Day` component that will enable a range selection only when the
* shift key is pressed.
*/
function Day(props: DayProps) {
const buttonRef = React.useRef<HTMLButtonElement>(null);
const { buttonProps, nonInteractiveProps, selected, modifiers } = useDay(
props.date,
props.displayMonth,
buttonRef
);
if (!buttonProps && !nonInteractiveProps) return <></>;
if (nonInteractiveProps) return <div {...nonInteractiveProps} />;
const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
if (!selected || modifiers.selected || e.shiftKey) {
buttonProps.onClick(e);
}
};
return <Button {...buttonProps} ref={buttonRef} onClick={handleClick} />;
}
export default function Example() {
return <DayPicker components={{ Day }} mode="range" />;
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.