react-day-picker

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<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

Similar packages

Other packages similar to react-day-picker

react-datepicker

react-datepicker is a comprehensive date picker library for React. It offers similar functionalities to react-day-picker, such as single date selection, range selection, and customization options. It also provides additional features like time selection and predefined date ranges.

material-ui-pickers

material-ui-pickers is a set of components that implement Material Design pickers for date and time in React. It integrates well with Material-UI and offers a different look and feel compared to react-day-picker, with similar functionality for date selection.

antd

antd, or Ant Design, is a UI design language and React UI library that includes a DatePicker component. It offers a wide range of features and is designed to work within the Ant Design system, providing a different user experience compared to react-day-picker.