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.

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

``bash npm install react-day-picker`

`Example`

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

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

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

Features

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

Example

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

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

  return (
          mode="single"
      selected={selected}
      onSelect={setSelected}
      footer={
        selected ?

Selected: ${selected.toLocaleDateString()}

 : "Pick a day."
      }
    />
  );
}