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.
➡️ react-day-picker.js.org for guides, examples and API reference.
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
Installation
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
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 (
<DayPicker
mode="single"
selected={selected}
onSelect={setSelected}
footer={footer}
/>
);
}Documentation
See 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.