React DayPicker
DayPicker is a React component to create date pickers, calendars, and date inputs for web applications.
- npm
- Yarn
- pnpm
npm install react-day-picker date-fns
yarn add react-day-picker date-fns
pnpm add react-day-picker date-fns
Features
- Extensive props to customize and configure the calendar.
- Easy to style and integrate with other CSS frameworks.
- Select single day, multiple day, ranges or create custom selections.
- Localizable in any language.
- Following the WAI-ARIA guidelines.
- Customizable internal components for complex use cases.
DayPicker is written in TypeScript and compiled to CommonJS and ESM. It requires date-fns as a peer dependency.
Example
import { DayPicker } from "react-day-picker";
import "react-day-picker/style.css";
function MyDatePicker() {
const [selected, setSelected] = useState<Date>();
return <DayPicker mode="single" selected={selected} onSelect={setSelected} />;
}
License
DayPicker is released under the MIT License.
Community
Ask for help and share your experience with DayPicker.
Funding
Consider supporting DayPicker's maintainer with a donation. Your support helps to keep the project alive and keep it updated.