Home page
Edit page

Getting started

react-day-picker is designed to cover the most common needs for a date picker in web applications.

The package includes:

  • the DayPicker component, to render the date picker (the “calendar”)
  • the DayPickerInput component – to render an input field opening the DayPicker in an overlay.

Setup

As dependency

Install as dependency to use it in your project:

npm install react-day-picker --save
# or with yarn
yarn add react-day-picker

If you are using the DayPickerInput component, you must install moment.js as well:

npm install moment --save
# or with yarn
yarn add moment

Then import the component and its style in your component:

import DayPicker from 'react-day-picker';

// Or import the input component
import DayPickerInput from 'react-day-picker/DayPickerInput';

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

Use from unpkg

Include the component without installing:

<script src="https://unpkg.com/react-day-picker/lib/daypicker.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/react-day-picker/lib/style.css">

The components will be available as window.DayPicker and window.DayPicker.Input.

Usage example

Open in CodeSandbox.

class MyAwesomeComponent extends React.Component {
  state = {
    selectedDay: new Date(),
  };
  handleDayClick = day => {
    this.setState({
      selectedDay: day,
    });
  };
  render() {
    return (
      <div>
        <DayPicker
          onDayClick={this.handleDayClick}
          selectedDays={this.state.selectedDay}
        />
      </div>
    );
  }
}

Go over to basic concepts to learn more, or see the APIs.