gpbl/react-day-picker

README

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.

Screenshot of DayPicker displaying the September 2025 calendar, with the date range from the 17th to the 20th selected.

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.

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

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.