Custom Modifiers
In DayPicker, a custom modifier is added to a day when the day matches a specific condition, called Matcher
.
Modifiers are set using the modifiers
prop. When matching a date, modifiers are passed to the onSelect
event and to other DayEventHandler (onDayClick
etc.) to inspect the days the user has interacted with.
For example, you can use a custom modifier to mark days as already booked in a booking app.
<DayPicker
modifiers={{
booked: [
new Date(2022, 5, 8),
new Date(2022, 5, 9),
new Date(2022, 5, 10),
{ from: new Date(2022, 5, 15), to: new Date(2022, 5, 20) }
]
}}
onDayClick={(date, modifiers) => {
if (modifiers.booked) {
alert("This day is already booked.");
}
}}
/>
Understanding Modifiers​
- Use modifiers to change the appearance of the days in the calendar or to inspect the days the user has interacted with (e.g. picking a day)
- DayPicker comes with some pre-built modifiers, such as
disabled
,selected
,hidden
,today
,range_start
, etc. designed to cover the most common use cases. - It is possible to implement custom modifiers, extending the behavior of DayPicker: see Custom Modifiers below for more details.
Built-in Modifiers​
selected
Modifier​
<DayPicker selected={new Date()} />
When in selection mode, use the selected
prop to add the selected
modifier to the selected dates, and style them accordingly. To see how to implement the selected
modifier, see the Selecting days guide.
disabled
Modifier​
Use the disabled
modifier to disable one or more days. Pass a Matcher
or an array of Matchers
to choose the disabled days:
// Disable Sundays and Saturdays
<DayPicker mode="range" disabled={{ dayOfWeek: [0, 6] }} />
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
hidden
Modifier​
The hidden
modifier removes the day from the calendar. Set the hidden days using the hidden
prop.
const hiddenDays = [
new Date(2022, 5, 10),
new Date(2022, 5, 20),
new Date(2022, 5, 11)
];
<DayPicker defaultMonth={hiddenDays[0]} hidden={hiddenDays} />;
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | ||
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 21 | 22 | 23 | 24 | 25 | |
26 | 27 | 28 | 29 | 30 |
today
Modifier​
The today
modifier is a special modifier added to the current date. You can also change the current date using the today
prop.
function Example() {
const handleDayClick: DayMouseEventHandler = (day, modifiers) => {
if (modifiers.today) {
alert("You clicked the today’s date.");
}
};
return (
<DayPicker onDayClick={handleDayClick} today={new Date(2019, 12, 22)} />
);
}
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Styling Modifiers​
A day can be styled according to its modifiers – using CSS or inline styles. See Styling DayPicker for more details.
const bookedDays = [
new Date(2021, 5, 8),
new Date(2021, 5, 9),
new Date(2021, 5, 11)
];
export function ModifiersWithClassnames() {
return (
<DayPicker
defaultMonth={bookedDays[0]}
modifiers={{
booked: bookedDays
}}
modifiersClassNames={{
booked: "my-booked-class"
}}
/>
);
}
Add the my-booked-class
class to your CSS:
.my-booked-class {
background-color: tomato;
color: white;
border-radius: 50%;
}
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |