Home page


Date picker component for React

no dependencies ● fully customizable ● ARIA support ● localizable ● less than 8KB

Read the docs Browse the examples


Style days with modifiers

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

Works with input fields

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


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

Select range of days

Specify which days should be selected in your component's state.

...and much more!

Getting started

Install from npm

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 MyComponent() {
  return <DayPicker month={ new Date(2018, 8)} />

Start hacking it on this CodeSandbox.