Skip to main content

Modifiers

A modifier represents different state or style of a days shown in the calendar.

DayPicker comes with some built in modifiers: disabled, selected, hidden, today, that are assigned to the matching days by using the corrispective props. It is also possible to add new modifiers to add different styles or states for the days.

Disabling days#

The disabled modifier disables the interaction with a day. It is set using the disabled prop. Pass a Matcher or an array of Matchers to choose the disabled days.

import * as React from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
const disabledDays = [
new Date(2022, 5, 10),
new Date(2022, 5, 12),
new Date(2022, 5, 20),
{ from: new Date(2022, 4, 18), to: new Date(2022, 4, 29) }
];
return (
<DayPicker
defaultMonth={new Date(2022, 5, 10)}
mode="single"
disabled={disabledDays}
/>
);
}
Output
June 2022
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.

Hidden days#

The hidden modifier disables the interaction with a day. It is set using the hidden prop.

import * as React from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
const hiddenDays = [
new Date(2022, 5, 10),
new Date(2022, 5, 20),
new Date(2022, 5, 11)
];
return <DayPicker defaultMonth={new Date(2022, 5)} hidden={hiddenDays} />;
}
Output
June 2022
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
1st June (Wednesday)
2nd June (Thursday)
3rd June (Friday)
4th June (Saturday)
5th June (Sunday)
6th June (Monday)
7th June (Tuesday)
8th June (Wednesday)
9th June (Thursday)
12th June (Sunday)
13th June (Monday)
14th June (Tuesday)
15th June (Wednesday)
16th June (Thursday)
17th June (Friday)
18th June (Saturday)
19th June (Sunday)
21st June (Tuesday)
22nd June (Wednesday)
23rd June (Thursday)
24th June (Friday)
25th June (Saturday)
26th June (Sunday)
27th June (Monday)
28th June (Tuesday)
29th June (Wednesday)
30th June (Thursday)

The today modifier#

The today modifier is added to the current date.

import * as React from 'react';
import { DayClickEventHandler, DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
const handleDayClick: DayClickEventHandler = (day, { today }) => {
if (today) {
alert('You clicked the today’s date!');
} else {
alert(`You clicked ${day.toLocaleDateString()}.`);
}
};
return (
<DayPicker
mode="single"
onDayClick={handleDayClick}
footer="Try clicking the today’s date."
/>
);
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
Try clicking the today’s date.

Change the current date with the today prop:

import * as React from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
return <DayPicker today={new Date(2022, 2, 18)} />;
}
Output
March 2022
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
1st March (Tuesday)
2nd March (Wednesday)
3rd March (Thursday)
4th March (Friday)
5th March (Saturday)
6th March (Sunday)
7th March (Monday)
8th March (Tuesday)
9th March (Wednesday)
10th March (Thursday)
11th March (Friday)
12th March (Saturday)
13th March (Sunday)
14th March (Monday)
15th March (Tuesday)
16th March (Wednesday)
17th March (Thursday)
18th March (Friday)
19th March (Saturday)
20th March (Sunday)
21st March (Monday)
22nd March (Tuesday)
23rd March (Wednesday)
24th March (Thursday)
25th March (Friday)
26th March (Saturday)
27th March (Sunday)
28th March (Monday)
29th March (Tuesday)
30th March (Wednesday)
31st March (Thursday)

Custom modifiers#

Add new modifiers according to your app’s requirements. For example, a booking app may use a booked modifier to mark days as already booked.

Use the modifiers prop to pass an object with custom modifiers. Change the inline-style of the cell with modifierStyles.

import * as React from 'react';
import { DayPicker, SelectSingleEventHandler } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
const bookedDays = [
new Date(2021, 5, 8),
new Date(2021, 5, 9),
{ from: new Date(2021, 5, 14), to: new Date(2021, 5, 19) }
];
const bookedStyle = { border: '2px solid currentColor' };
const [alreadyBooked, setAlreadyBooked] = React.useState<boolean>(false);
const handleSelect: SelectSingleEventHandler = (day, _, modifiers) => {
if (day && modifiers.booked) {
setAlreadyBooked(true);
} else {
setAlreadyBooked(false);
}
};
const footer = alreadyBooked
? 'This day is already booked!'
: 'Try to pick a booked day.';
return (
<DayPicker
defaultMonth={new Date(2021, 5, 8)}
modifiers={{
booked: bookedDays
}}
modifierStyles={{
booked: bookedStyle
}}
mode="single"
onSelect={handleSelect}
footer={footer}
/>
);
}
Output
June 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
Try to pick a booked day.

Styling days with modifiers#

A day can be styled according to its modifiers – using CSS or inline styles.

Styling via class names#

A modifier is added in the class name of the Day element: for example, a disabled day will get the .rdp-day_disabled class name, a "booked" day .rdp-day_booked, etc.

You can change which class name get each modifier via modifierClassNames. Is also possible to just the class name prefix via modifierPrefix.

The following example adds .my-booked-class to the day with a booked modifier – applying a custom class name to it.

import * as React from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
const bookedDays = [new Date(2021, 5, 8), new Date(2021, 5, 9)];
const style = `.my-booked-class { color: tomato }`;
return (
<>
<head>
<style>{style}</style>
</head>
<DayPicker
defaultMonth={bookedDays[0]}
modifiers={{
booked: bookedDays
}}
modifierClassNames={{
booked: 'my-booked-class'
}}
/>
</>
);
}
Output
June 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
1st June (Tuesday)
2nd June (Wednesday)
3rd June (Thursday)
4th June (Friday)
5th June (Saturday)
6th June (Sunday)
7th June (Monday)
8th June (Tuesday)
9th June (Wednesday)
10th June (Thursday)
11th June (Friday)
12th June (Saturday)
13th June (Sunday)
14th June (Monday)
15th June (Tuesday)
16th June (Wednesday)
17th June (Thursday)
18th June (Friday)
19th June (Saturday)
20th June (Sunday)
21st June (Monday)
22nd June (Tuesday)
23rd June (Wednesday)
24th June (Thursday)
25th June (Friday)
26th June (Saturday)
27th June (Sunday)
28th June (Monday)
29th June (Tuesday)
30th June (Wednesday)

Styling via inline styles#

Another practical way is using inline styles. Use modifierStyles to change the style of a day matching the specified modifier.

In the following example, the available days are styled via inline styles.

import React, { CSSProperties } from 'react';
import { DayClickEventHandler, DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
const availableDays = [new Date(2021, 5, 23), new Date(2021, 5, 24)];
const availableStyle: CSSProperties = {
fontWeight: 900,
color: 'lightgreen'
};
const handleDayClick: DayClickEventHandler = (day, { available }) => {
if (available) alert('You clicked an available day.');
};
return (
<DayPicker
mode="single"
defaultMonth={availableDays[0]}
modifiers={{
available: availableDays
}}
modifierStyles={{
available: availableStyle
}}
onDayClick={handleDayClick}
/>
);
}
Output
June 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.