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
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.
- set the selection mode to
- store the selected dates in the parent’s state
- use the
To refine how the selection works when interacting with the day, you can use a
Day component to extend the built-in selection modes.
DayPicker includes a useDay hook useful for creating a
- create a new
Daycomponent following the
- pass the new component to the
The following example implements a DayPicker that allows selecting ranges only when the user is pressing the Shift key while clicking a day.