react-day-picker/website/docs/guides/custom-modifiers.mdx

Customizable Date Picker for React

---
sidebar_position: 3
---

# Custom Modifiers

In DayPicker, a **custom modifier** is added to a day when the day matches a specific condition, called [`Matcher`](../api/type-aliases/Matcher.md).

Modifiers are set using the `modifiers` prop. When matching a date, modifiers are passed to the `onSelect` event and to other [DayEventHandler](../api/type-aliases/DayEventHandler.md) (`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 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](../api/type-aliases/Modifiers.md), 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](#custom-modifiers) below for more details.

## Built-in Modifiers

### `selected` Modifier

```tsx
<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](../docs/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 choose the disabled days:

```tsx
// Disable Sundays and Saturdays
<DayPicker mode="range" disabled={{ dayOfWeek: [0, 6] }} />
```

<BrowserWindow>
  <Examples.ModifiersDisabled />
</BrowserWindow>

### `hidden` Modifier

The `hidden` modifier removes the day from the calendar. Set the hidden days using the `hidden` prop.

```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>
  <Examples.ModifiersHidden />
</BrowserWindow>

### `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.

```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>
  <Examples.ModifiersToday />
</BrowserWindow>

## Styling Modifiers

A day can be styled according to its modifiers – using CSS or inline styles. See [Styling DayPicker](../docs/styling.mdx) for more details.

```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>
  <Examples.ModifiersClassnames />
</BrowserWindow>