# React DayPicker [DayPicker](http://react-day-picker.js.org) is a date picker component for [React](https://reactjs.org). Renders a monthly calendar to select days. DayPicker is customizable, works great with input fields and can be styled to match any design. ➡️ **[react-day-picker.js.org](http://react-day-picker.js.org)** for guides, examples and API reference.

Shows a screenshot of the React DayPicker component in a browser’s window.

## Main features - ☀️ Select days, ranges or whatever - 🧘‍♀️ using [date-fns](http://date-fns.org) as date library - 🌎 Localizable into any language - ➡️ Keyboard navigation - ♿️ [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) support - 🤖 Written in TypeScript - 🎨 Easy to style and customize - 🗓 Support multiple calendars - 📄 Easy to integrate input fields ## Installation ```shell npm install react-day-picker date-fns # using npm pnpm install react-day-picker date-fns # using pnpm yarn add react-day-picker date-fns # using yarn ```

## Example ```tsx import { useState } from 'react'; import { format } from 'date-fns'; import { DayPicker } from 'react-day-picker'; import 'react-day-picker/dist/style.css'; export default function Example() { const [selected, setSelected] = useState(); let footer =

Please pick a day.

; if (selected) { footer =

You picked {format(selected, 'PP')}.

; } return ( ); } ``` ## Documentation See **[react-day-picker.js.org](http://react-day-picker.js.org)** for guides, examples and API reference of the latest version. Docs for version 7 are at react-day-picker-v7.netlify.app.

	Stars	Issues	Version	Updated	Created
react-day-picker			8.10.1	15 days ago	9 years ago
react-event-calendar	126	17	0.3.0	8 years ago	9 years ago
react-native-calendar-range-picker	80	33	1.6.0	a month ago	4 years ago

react-day-picker vs react-event-calendar vs react-native-calendar-range-picker

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past