react-day-picker Logo

react-day-picker

Date picker component for React

Flexible, highly customizable, localizable and with ARIA support.

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. Requires moment.js.

Please type a day:

Localizable

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

November 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

Select range of days

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

Please select the first day.

November 2017
Su
Mo
Tu
We
Th
Fr
Sa
29
30
31
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
1
2
3
4
5
6
7
8
9

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 />;
}