React DayPicker

DayPicker is a React component to create date pickers, calendars, and date inputs for web applications.

📖 See daypicker.dev for guides, examples and API reference.

Features

• 🛠 An extensive set of props for configuring and customizing the calendar.
• 🎨 A minimal design that can be easily styled with CSS or any CSS framework.
• 📅 Supports selections of single day, multiple days, ranges of days, or custom selections.
• 🌍 Can be localized into any language.
• 📆 Supports for ISO 8601 dates, UTC dates, and Jalali Calendar.
• ♿ Complies with WCAG 2.1 AA requirements for accessibility.
• ⚙️ 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.

Installation

npm install react-day-picker date-fns

Usage

import { DayPicker } from "react-day-picker";
import "react-day-picker/dist/style.css";

function MyDatePicker() {
  const [selected, setSelected] = useState<Date | undefined>();
  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.

• Discuss the project on GitHub
• Report an issue on GitHub

Funding

Consider supporting DayPicker's maintainer with a donation. Your support helps to keep the project alive and keep it updated.

• Sponsor DayPicker on GitHub