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 renders 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

Code


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

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

Result


December 2017
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