Skip to main content

React DayPicker

DayPicker is a date picker component for React. Renders a monthly calendar to select days. DayPicker is customizable, works great with input fields and can be styled to match any design.

➡️ 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 as date library
  • 🌎 Localizable into any language
  • ➡️ Keyboard navigation
  • ♿️ WAI-ARIA support
  • 🤖 Written in TypeScript
  • 🎨 Easy to style and customize
  • 🗓 Support multiple calendars
  • 📄 Easy to integrate input fields


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
npm version npm downloads stars sponsors


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<Date>();

let footer = <p>Please pick a day.</p>;
if (selected) {
footer = <p>You picked {format(selected, 'PP')}.</p>;
return (


See for guides, examples and API reference of the latest version.

Docs for version 7 are at