Home page
Edit page

Basic concepts

This guide illustrates the DayPicker basic concepts by implementing a date picker to select, clear and disable days from the calendar.

For a guide to render the input field, read this chapter.

Selecting a day

react-day-picker doesn’t hold the selected day in its state. Instead, you have to save it in your component as the user interacts with the calendar.

The following component uses the onDayClick prop to save the clicked day in its own state:

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

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

export default class SelectDay extends React.Component {
  state = {
    selectedDay: new Date(), // We set the selected default as today
  };
  handleDayClick = day => {
    this.setState({ 
      selectedDay: day 
    });
  }
  render() {
    return (
      <div>
        <DayPicker onDayClick={ this.handleDayClick } />
        <p>
          You clicked { this.state.selectedDay.toLocaleDateString() }
        </p>
      </div>
    )
  }
}

Open in CodeSandbox.

We pass then the selected day (saved in the component’s state) to the selectedDays prop:

<DayPicker
  onDayClick={ this.handleDayClick }
+ selectedDays={ this.state.selectedDay }
/>

Open in CodeSandbox.

That day cell will get the DayPicker-Day--selected CSS class.

Clearing the selected day

When a selected day is clicked again, we want to clear it. This can be made setting the component’s selectedDay to undefined (or null).

The onDayClick handler receives as second argument an object that can be inspected to check if the clicked day has been selected or not:

- handleDayClick = day => {
+ handleDayClick = (day, { selected }) => {
+  if (selected) {
+    // Unselect the day if already selected
+    this.setState({ selectedDay: undefined });
+    return;
+  }
  this.setState({ selectedDay: day });
}

That’s all! See the CodeSandbox using the code above.

Marking days as disabled

Disabled days should not respond to the user’s interaction and should appear as “disabled” (e.g. grayed out) on the calendar. Here we are disabling all the Sundays:

<DayPicker
  selectedDays={ this.state.selectedDay }
+ disabledDays={ { daysOfWeek: [0] } }
  onDayClick={ this.handleDayClick }
/>

Open in CodeSandbox.

The selectedDays and disabledDays props can accept different value types to match different days.

Preventing the user to select a disabled day

This change still does not prevent the user to select a disabled day. Thus, we need our component to not update its state if the clicked day is disabled.

In the click handler we can use the second argument to check if the clicked day is disabled, and prevent its selection:

- handleDayClick = (day, { selected }) => {
+ handleDayClick = (day, { selected, disabled }) => {
+   if (disabled) {
+     return;
+   }
   if (selected) {
     // Unselect the day if already selected
     this.setState({ selectedDay: undefined });
     return;
   }
  this.setState({ selectedDay: day });
}

The final implementation:

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

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

export default class SelectDay extends React.Component {
  state = {
    selectedDay: new Date(), // We set the selected default as today
  };
  handleDayClick = (day, { selected, disabled }) => {
    if (disabled) {
      return;
    }
    if (selected) {
      // Unselect the day if already selected
      this.setState({
        selectedDay: undefined,
      });
      return;
    }
    this.setState({
      selectedDay: day,
    });
  };
  render() {
    const { selectedDay } = this.state;
    return (
      <div>
        <DayPicker
          onDayClick={this.handleDayClick}
          selectedDays={this.state.selectedDay}
          disabledDays={ { daysOfWeek: [0] } }
        />
        {selectedDay &&
          <p>
            You clicked {selectedDay.toLocaleDateString()}
          </p>}
      </div>
    );
  }
}

Open in CodeSandbox.

Next steps

The selectedDays/disabledDays props and the onDayClick event handler can implement a more complex logic to respond to your app’s needs. For example, you can make the date picker to select a range of days.

You can go deeper with the customization using day modifiers. Read more about them in Matching days with modifiers.