Home page
Edit code

Save the clicked day in state

Use the onDayClick event to mark or unmark a day as selected when the user clicks a day cell.

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

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

export default class Example extends React.Component {
  state = {
    selectedDay: null,
  };
  handleDayClick = (day, { selected }) => {
    this.setState({
      selectedDay: selected ? undefined : day,
    });
  };
  render() {
    const { selectedDay } = this.state;
    return (
      <div>
        <DayPicker
          selectedDays={selectedDay}
          onDayClick={this.handleDayClick}
        />
        <p>
          {selectedDay
            ? selectedDay.toLocaleDateString()
            : 'Please select a day 👻'}
        </p>
      </div>
    );
  }
}