Home page

Basic concepts

This guide illustrates the react-day-picker’s basic concepts by implementing a date picker to select, clear and disable days from the calendar.

You don’t need to read this guide to start using react-day-picker: see the examples if you prefer to directly copy & paste code in your application :-)

As default, react-day-picker just displays the calendar of the current month.

Code

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

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

export default class BasicConcepts extends React.Component {
  render() {
    return (
      <div>
        <DayPicker />
      </div>
    );
  }
}

Result

March 2021
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Selecting a day

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

The following component uses the onDayClick prop to hold the selected day in its own state. Try to click or tap on a day cell!

Code

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

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

export default class BasicConcepts extends React.Component {
  constructor(props) {
    super(props);
    this.handleDayClick = this.handleDayClick.bind(this);
    this.state = {
      selectedDay: undefined,
    };
  }

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

  render() {
    return (
      <div>
        <DayPicker onDayClick={this.handleDayClick} />
        {this.state.selectedDay ? (
          <p>You clicked {this.state.selectedDay.toLocaleDateString()}</p>
        ) : (
          <p>Please select a day.</p>
        )}
      </div>
    );
  }
}

Result

March 2021
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Please select a day.

Now, we want to highlight the day cell to show in the calendar which day has been selected. This is done using the selectedDays prop.

Code

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

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

export default class BasicConcepts extends React.Component {
  constructor(props) {
    super(props);
    this.handleDayClick = this.handleDayClick.bind(this);
    this.state = {
      selectedDay: undefined,
    };
  }

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

  render() {
    return (
      <div>
        <DayPicker
          onDayClick={this.handleDayClick}
          selectedDays={this.state.selectedDay}
        />
        {this.state.selectedDay ? (
          <p>You clicked {this.state.selectedDay.toLocaleDateString()}</p>
        ) : (
          <p>Please select a day.</p>
        )}
      </div>
    );
  }
}

Result

March 2021
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Please select a day.

Click or tap a day to highlight its cell.

Using the the browser’s developer tools, note how the selected day cell receive a DayPicker-Day--selected CSS modifier. Custom modifiers can be added to day cells using the modifiers prop. Read more about them in the Matching days guide.

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.

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

Code

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

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

export default class BasicConcepts extends React.Component {
  constructor(props) {
    super(props);
    this.handleDayClick = this.handleDayClick.bind(this);
    this.state = {
      selectedDay: undefined,
    };
  }

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

  render() {
    return (
      <div>
        <DayPicker
          onDayClick={this.handleDayClick}
          selectedDays={this.state.selectedDay}
        />
        {this.state.selectedDay ? (
          <p>You clicked {this.state.selectedDay.toLocaleDateString()}</p>
        ) : (
          <p>Please select a day.</p>
        )}
      </div>
    );
  }
}

Result

March 2021
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Please select a day.

Click or tap a day to see how it’s cleared when selected again.

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 displaying all the Sundays as disabled, using the disabledDays prop.

Code

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

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

export default class BasicConcepts extends React.Component {
  render() {
    return (
      <div>
        <DayPicker disabledDays={{ daysOfWeek: [0] }} />
      </div>
    );
  }
}

Result

March 2021
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Using the the browser’s developer tools, note how the disabled day cell receive a DayPicker-Day--disabled CSS modifier.

In our selectable calendar, we can prevent the user selecting a disabled day inspecting the disabled modifier in the handleDayClick handler:

Code

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

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

export default class BasicConcepts extends React.Component {
  constructor(props) {
    super(props);
    this.handleDayClick = this.handleDayClick.bind(this);
    this.state = {
      selectedDay: undefined,
    };
  }

  handleDayClick(day, { selected, disabled }) {
    if (disabled) {
      // Day is disabled, do nothing
      return;
    }
    if (selected) {
      // Unselect the day if already selected
      this.setState({ selectedDay: undefined });
      return;
    }
    this.setState({ selectedDay: day });
  }

  render() {
    return (
      <div>
        <DayPicker
          onDayClick={this.handleDayClick}
          selectedDays={this.state.selectedDay}
          disabledDays={{ daysOfWeek: [0] }}
        />
        {this.state.selectedDay ? (
          <p>You clicked {this.state.selectedDay.toLocaleDateString()}</p>
        ) : (
          <p>Please select a day.</p>
        )}
      </div>
    );
  }
}

Result

March 2021
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Please select a day.

That’s it. You know now the basic concepts of react-day-picker: how to select and disable days and how to use the onDayClick event handler.

react-day-picker is very flexible: using modifiers you can match days to change the aspect of the day cells, according to your app’s needs. You can use its extensive API to further customize the react-day-picker’s behavior and layout.

A very common implementation of react-day-picker is to bind it with an input form field. This is why we included in the package the DayPickerInput component.