---
id: modifiers
title: About Modifiers
---

> Use modifiers to change the appearance and the interaction with day elements.

Modifiers are properties assigned to days matching a specific condition – for
example when a day is selected, disabled, interactive. etc. By adding new
modifiers, you can implement advanced date pickers.

For example, default modifiers are passed to the onDayClick event handler:

```jsx preview
<DayPicker
  showOutsideDays
  enableOutsideDaysClick
  onDayClick={ (day, modifiers) => {
    console.log('Is %s today?', day, modifiers.today);
    console.log('Is %s selected?', day, modifiers.selected);
    console.log('Is %s disabled?', day, modifiers.disabled);
    console.log('Is %s hidden?', day, modifiers.hidden);
    console.log('Is %s interactive?', day, modifiers.interactive);
    console.log('Is %s before the start of the month?', day, modifiers.beforemonth);
    console.log('Is %s after the end of the month?', day, modifiers.aftermonth);
  }}
/>
```

Change the appearance of days matching a modifier using
[daysStyles](./api/daypicker#daysstyles) or
[daysClassNames](./api/daypicker#daysclassnames) props:

```jsx
<DayPicker
  daysStyles={{
    disabled: { opacity: 0.5 },
    selected: { background: "salmon" },
  }}
  daysClassNames={{
    today: 'some-today-css-class',
    interactive: 'some-other-css-class',
  }}
/>
```

DayPicker assigns modifiers for the days matching
[selected](./api/daypicker#selected),
[disabled](./api/daypicker#disabled) and
[hidden](./api/daypicker#disabled) props.

Other accessory modifiers
available for any day are [listed below](#default-modifiers).

## Adding modifiers

Use the [days prop](./api/daypicker#days) to add day modifiers according
to your application’s requirement.

For example, a booking user interface may need to implement “available”,
“unavailable” and “booked” days:

```jsx preview
function App() {
  const days = {
    available: { after: new Date(2020, 8, 18) },
    unavailable: { before: new Date(2020, 8, 15) },
    booked: [
      new Date(2020, 8, 15),
      new Date(2020, 8, 16),
      new Date(2020, 8, 17),
      new Date(2020, 8, 18),
    ],
  };
  const styles = {
    available: { color: 'limegreen' },
    unavailable: { textDecoration: 'line-through' },
    booked: { color: 'salmon' },
  };
  return (
    <div>
      <DayPicker
        month={new Date(2020, 8)}
        days={days}
        daysStyles={styles}
      />
      <pre>
        Legend: <span style={styles.unavailable}>unavailable</span>{' '}
        <span style={styles.booked}>booked</span>{' '}
        <span style={styles.available}>available</span>{' '}
      </pre>
    </div>
  );
}
```

## Using CSS to style modifiers

As alternative to the inline styles above, you can assign CSS classes to the
days matching a modifier. Use the
[daysClassNames prop](./api/daypicker#daysClassNames):

```jsx preview
function App() {
  const days = {
    available: { after: new Date(2020, 8, 18) },
    unavailable: { before: new Date(2020, 8, 15) },
    booked: [
      new Date(2020, 8, 15),
      new Date(2020, 8, 16),
      new Date(2020, 8, 17),
      new Date(2020, 8, 18),
    ],
  };
  const css = `
    .unavailable-day {
      text-decoration: line-through;
    }
    .available-day {
      color: limegreen;
    }
    .booked-day {
      color: salmon;
    }
  `;
  return (
    <div>
      <style>{ css }</style>
      <DayPicker
        month={new Date(2020, 8)}
        days={days}
        daysClassNames={{
          unavailable: 'unavailable-day',
          available: 'available-day',
          booked: 'booked-day'
        }}
      />
    </div>
  );
}
```

## Accessing modifiers from event handlers

Modifiers are passed to the [event handler
props](./api/daypicker#event-handlers).

For example, to display an alert when the selected day is unavailable, check the
"unavailable" modifier in the `onDayClick` event handler. To deselect an already
selected day, check for the `selected` modifier, etc.

```jsx preview
function App() {
  const [selected, setSelected] = useState();

  const days = {
    unavailable: [
      new Date(2020, 8, 19),
      new Date(2020, 8, 20),
      new Date(2020, 8, 21),
    ]
  };
  const daysStyles = {
    unavailable: {
      textDecoration: 'line-through',
      color: 'salmon'
    },
  };

  const handleDayClick = (day, modifiers) => {
    if (modifiers.unavailable) {
      alert('This day is not available.');
      return;
    }
    if (modifiers.selected) {
      // Unselect the already selected day
      setSelected(undefined);
    } else {
      setSelected(day);
    }
  };
  return (
    <DayPicker
      initialMonth={new Date(2020, 8)}
      selected={selected}
      days={days}
      daysStyles={daysStyles}
      onDayClick={handleDayClick}
    />
  );
}
```

## Default Modifiers

DayPicker already implements some default modifiers:

:::caution
The table is not updated as it should be created by typedocs instead.
:::

| Modifier      | Meaning                                                          |
| ------------- | ---------------------------------------------------------------- |
| `aftermonth`  | The day is after the current displayed month.                    |
| `beforemonth` | The day is before the current displayed month.                   |
| `disabled`    | The day matches the `disabled` prop.                             |
| `hidden`      | The day matches the `hidden` prop.                               |
| `interactive` | The user can actually interact (by clicking or tapping) the day. |
| `selected`    | The day matches the `selected` prop.                             |
| `today`       | The day is today.                                                |
