File size: 4,095 Bytes
cf86710 | 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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | ---
sidebar_position: 3
---
# Custom Modifiers {#custom-modifiers}
In DayPicker, a **custom modifier** is added to a day when the day matches a specific condition, called a [`Matcher`](../api/type-aliases/Matcher.md).
Modifiers are set using the `modifiers` prop. When a date matches a modifier, the modifier is passed to the `onSelect` event and other [DayEventHandler](../api/type-aliases/DayEventHandler.md) events (`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:
```tsx
<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 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](../api/type-aliases/Modifiers.md), such as `disabled`, `selected`, `hidden`, `today`, `range_start`, etc., designed to cover the most common use cases.
- You can implement custom modifiers to extend the behavior of DayPicker. See the examples below for more details.
## Built-in Modifiers
### `selected` Modifier
```tsx
<DayPicker selected={new Date()} />
```
In selection mode, use the `selected` prop to add the `selected` modifier to the selected dates and style them accordingly. For more details on implementing the `selected` modifier, see the [Selecting Days guide](../selections/selection-modes.mdx).
### `disabled` Modifier
Use the `disabled` modifier to disable one or more days. Pass a [`Matcher`](../api/type-aliases/Matcher.md) or an array of matchers to specify the disabled days:
```tsx
// Disable Sundays and Saturdays
<DayPicker mode="range" disabled={{ dayOfWeek: [0, 6] }} />
```
<BrowserWindow sourceUrl="https://github.com/gpbl/react-day-picker/blob/main/examples/ModifiersDisabled.tsx">
<Examples.ModifiersDisabled />
</BrowserWindow>
### `hidden` Modifier
The `hidden` modifier removes a day from the calendar. Use the `hidden` prop to specify the days to be hidden:
```tsx
const hiddenDays = [
new Date(2022, 5, 10),
new Date(2022, 5, 20),
new Date(2022, 5, 11),
];
<DayPicker defaultMonth={hiddenDays[0]} hidden={hiddenDays} />;
```
<BrowserWindow sourceUrl="https://github.com/gpbl/react-day-picker/blob/main/examples/ModifiersHidden.tsx">
<Examples.ModifiersHidden />
</BrowserWindow>
### `today` Modifier
The `today` modifier is a special modifier applied to the current date. You can change the current date using the `today` prop:
```tsx
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)} />
);
}
```
<BrowserWindow sourceUrl="https://github.com/gpbl/react-day-picker/blob/main/examples/ModifiersToday.tsx">
<Examples.ModifiersToday />
</BrowserWindow>
## Styling Modifiers
A day can be styled based on its modifiers using CSS or inline styles. For more details, see [Styling DayPicker](../docs/styling.mdx).
```tsx
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:
```postcss
.my-booked-class {
background-color: tomato;
color: white;
border-radius: 50%;
}
```
<BrowserWindow sourceUrl="https://github.com/gpbl/react-day-picker/blob/main/examples/ModifiersClassnames.tsx">
<Examples.ModifiersClassnames />
</BrowserWindow>
|