Skip to main content

Modifiers

In DayPicker, a modifier is added to a day when the day matches a specific condition, called Matcher. For example, selected days have the selected modifiers, disabled days the disabled modifier, the today's date matches the today modifier, etc.

<DayPicker selected={new Date()} />
<DayPicker disabled={new Date()} />
<DayPicker hidden={new Date()} />

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. See the InternalModifiers enum for a list of the internal modifiers.
  • It is possible to implement custom modifiers, extending the behavior of DayPicker: see Custom Modifiers below for more details.

The 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.

Disabling days​

When in selection mode, use the disabled modifier to disable one or more days. Pass a Matcher or an array of Matchers to choose the disabled days:

| 
import React from 'react';

import { DayPicker } from 'react-day-picker';

export default function App() {
  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}
    />
  );
}
SuMoTuWeThFrSa

Hidden days​

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

| 
import React from 'react';

import { DayPicker } from 'react-day-picker';

export default function App() {
  const hiddenDays = [
    new Date(2022, 5, 10),
    new Date(2022, 5, 20),
    new Date(2022, 5, 11)
  ];

  return <DayPicker defaultMonth={hiddenDays[0]} hidden={hiddenDays} />;
}
SuMoTuWeThFrSa

The today modifier​

The today modifier is added to the current date:

| 
import React, { useState } from 'react';

import { DayClickEventHandler, DayPicker } from 'react-day-picker';

export default function App() {
  const initialFooter = <p>Try clicking the today’s date.</p>;
  const [footer, setFooter] = useState(initialFooter);

  const handleDayClick: DayClickEventHandler = (day, modifiers) => {
    if (modifiers.today) {
      setFooter(<p>You clicked the today’s date.</p>);
    } else {
      setFooter(initialFooter);
    }
  };

  return <DayPicker onDayClick={handleDayClick} footer={footer} />;
}
SuMoTuWeThFrSa

Try clicking the today’s date.

info

You can change the current date using the today prop.

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 and their matcher. Change the inline-style of the cell with modifiersStyles or with modifiersClassNames.

| 
import React from 'react';

import { DayClickEventHandler, DayPicker } from 'react-day-picker';

const bookedDays = [new Date(2021, 5, 8), new Date(2021, 5, 9)];
const bookedStyle = { border: '2px solid currentColor' };

export default function App() {
  const [booked, setBooked] = React.useState(false);

  const handleDayClick: DayClickEventHandler = (day, modifiers) => {
    setBooked(day && modifiers.booked);
  };

  const footer = booked
    ? 'This day is already booked!'
    : 'Try to pick a booked day.';

  return (
    <DayPicker
      defaultMonth={new Date(2021, 5, 8)}
      modifiers={{ booked: bookedDays }}
      modifiersStyles={{ booked: bookedStyle }}
      onDayClick={handleDayClick}
      footer={footer}
    />
  );
}
SuMoTuWeThFrSa
Try to pick a booked day.

Styling modifiers​

A day can be styled according to its modifiers – using CSS or inline styles. See Styling DayPicker for more details.