Get started

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

• the DayPicker component to render the calendar (see: basic concepts, API)
• 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

Then import the component and its style into 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

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

export default function Hello() {
  return <DayPicker />;
}