Getting started

To understand how react-day-picker works, we will create a simple React component to select a day from the day picker.

First, write a new SelectDay component:

import React from "react";
import DayPicker from "react-day-picker";

import "react-day-picker/lib/style.css";

class SelectDay extends React.Component {
  render() {
    return (
      <div>
        <DayPicker />
      </div>
    )
  }
}

Note The CSS in react-day-picker/lib/style.css is used here only for example purpose. Read Styling to know how to properly style this component. In this example, we are using webpack-css-loader to require CSS files.

Use onDayClick to make a day clickable

The code above displays a day picker, yet nothing happens when a day is clicked. Use the onDayClick prop to store the clicked day in the component's state:

class SelectDay extends React.Component {

  state = {
    selectedDay: null
  }

  handleDayClick(e, day, modifiers) {
    this.setState({ selectedDay: day });
  }

  render() {
    const { selectedDay } = this.state;
    return (
      <div>
        <DayPicker onDayClick={ this.handleDayClick.bind(this) } />
        <p>
          Selected: { selectedDay ? selectedDay.toLocaleDateString() : "(none)" }
        </p>
      </div>
    )
  }
}

Use modifiers to change the days appearance

The selected day is indistinguishable from the other days until we don't style it. For example, we want the selected day appear on a blue background.

To change the day appearance, we add a modifier, i.e. a string used as CSS modifier for the day's element.

Create a CSS style with a BEM modifier

First, create a CSS class in an external CSS file, where the day element has a selected modifier:

/* modifiers.css */
.DayPicker-Day--selected {
  background-color: #4A90E2;
  color: white;
}

We are using a BEM-like syntax. In the rendered HTML, the DayPicker-Day class represents the day element, and --selected is the modifier we want to use to mark a day as "selected".

Make sure you include the CSS in the component:

import React from "react";
import DayPicker from "react-day-picker";

import "react-day-picker/lib/style.css";
import "../modifiers.css";
// ..snip...

To add modifiers, pass named functions to the modifiers prop

To add modifiers, use the modifiers prop. This prop takes an object of named functions. Those functions are called when rendering the day elements, and take the day as argument. As they returns true, the function’s name is added as modifier.

Create an object containing a function named selected. This function must return true when the selected day is the same day shown in the element:

// snip
render() {
  const { selectedDay } = this.state;
  const modifiers = {
    selected(day) {
      return day.getDate() === selectedDay.getDate() &&
        day.getMonth() === selectedDay.getMonth() &&
        day.getFullYear() === selectedDay.getFullYear();
    }
  }
  return (
    <div>
      <DayPicker modifiers={ modifiers } onDayClick={ this.handleDayClick.bind(this) } />
      <p>
        Selected: { selectedDay ? selectedDay.toLocaleDateString() : "(none)" }
      </p>
    </div>
  )
}
// snip

Now, when the day is selected, it appears with a red background because its element has the DayPicker-Day--selected class.

Access modifiers from the event handlers

Modifiers are passed to event handlers. For example, if the selected day is clicked again, we un-select it:


handleDayClick(e, day, modifiers) {
  if (modifiers.indexOf("selected") > -1) {
    this.setState({
      selectedDay: null
    })
    return;
  }
  this.setState({
    selectedDay: day
  });
}

Modifiers can prevent the selection of specific days. For example, the following modifier marks any Sunday as disabled:

const modifiers = {
  isDisabled: day => day.getDay() === 0
}

then, the click handler stops the interaction when the day contains the isSunday modifier:

handleDayClick(e, day, modifiers) {
  if (modifiers.indefOf("isDisabled") > -1) {
    return; 
  }
  // etc.
}

Use the included utilities to simplify the code

react-day-picker comes with some utilities to simplify the creation of modifiers. For example, dateUtils contains a function called isSameDay useful to detect if two days are the same. We can use it for the selected modifier:

import { dateUtils } from "react-day-picker/utils";

// snip

render() {
  const { selectedDay } = this.state;
  const modifiers = {
    selected: day => dateUtils.isSameDay(day, selectedDay)
  }
  return (
    <div>
      <DayPicker modifiers={ modifiers } onDayClick={ this.handleDayClick.bind(this) } />
      <p>
        Selected: { selectedDay ? selectedDay.toLocaleDateString() : "(none)" }
      </p>
    </div>
  )
}

See dateUtils for more information.

Conclusion

After reading this guide you should know how react-day-picker works:

  • use event handlers like onDayClick to enable user interaction
  • use modifiers to change the appearance of the days in the calendar
  • use modifiers to prevent user interaction with some days

See the whole example here.

Next, explore the Component API to see what else you can do.