# 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.