React DayPicker

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

Documentation

See daypicker.dev for guides, examples and API reference, or read the 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, Persian, Buddhist (Thai), Ethiopic, Hebrew and broadcast calendar.
🦮 Complies with WCAG 2.1 AA requirements for accessibility.
⚙️ Customizable components to extend the rendered elements.
🔤 Easy integration with input fields.

DayPicker is written in TypeScript and compiled to CommonJS and ESM. It relies on date-fns for date manipulation and formatting.

Installation

npm install react-day-picker

Example

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

function MyDatePicker() {
  const [selected, setSelected] = useState();

  return (

  );
}

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.

React Day Picker

Categories

Language:

Stars:

Forks:

README