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

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