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.
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 React 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] = React.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.