react-day-picker Logo

react-day-picker

Date picker component for React

Flexible, highly customizable, localizable, with ARIA support, no external dependencies, ~9KB gzipped

Read the docsBrowse the examples

Star

Style days with modifiers

Define the disabled or selected days and change the aspect of each day cell with modifiers.

October 2018
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

Works with input fields

Display the date picker in an overlay using the DayPickerInput component.

Please type a day:

...or choose a range of days:

Localizable

Use your own translation strings or import those from moment.js, if you use it.

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

Select range of days

Specify which days should be selected in your component’s state (source).

Please select the first day.

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

Get started

Install via npm or yarn

$ npm install react-day-picker --save 
# or with yarn:
$ yarn add react-day-picker
npm version npm downloads circleci npm downloads

Import in your component

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

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