React DayPicker

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

@daypicker/react is the preferred package name for DayPicker v10 and newer.

Documentation

See daypicker.dev for guides, examples, and API reference, or read the v10 docs in the repository.

Features

• 🛠 Extensive set of props for customizing the calendar.
• 🎨 Minimal design that can be easily styled with CSS or any CSS framework.
• 📅 Supports selections of single days, multiple days, ranges of days, or custom selections.
• 🌍 Can be localized into any language and time zones.
• 🌐 Support for ISO 8601 and broadcast calendars, plus Persian, Hijri, Buddhist (Thai), Ethiopic, and Hebrew calendars through @daypicker/* add-on packages.
• 🦮 Complies with WCAG 2.1 AA requirements for accessibility.
• ⚙️ Customizable components to extend the rendered elements.
• 🔤 Easy integration with input fields.

Installation

Install the preferred DayPicker package name:

npm install @daypicker/react

Example

import { useState } from "react";
import { DayPicker } from "@daypicker/react"; import "@daypicker/react/style.css";
function MyDatePicker() {   const [selected, setSelected] = useState<Date>();
return (     <DayPicker       mode="single"       selected={selected}       onSelect={setSelected}       footer={         selected ? Selected: ${selected.toLocaleDateString()} : "Pick a day."       }     />   ); }

Compatibility

DayPicker is compatible with React 16.8 and later.

License

DayPicker is released under the MIT License.

Community

Ask for help and share your experience with DayPicker:

• 💬 Discussion forums - Get support and provide feedback.
• 🪳 Report an issue - Report bugs or request features.

Sponsors

Thank you to everyone supporting DayPicker - your sponsorship keeps this project maintained and evolving.

• 🎗️ Become a sponsor: https://github.com/sponsors/gpbl