react-day-picker

DayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications.
GitHub
6.43k
Created 10 years ago, last commit 16 days ago
179 contributors
6.2k commits
Stars added on GitHub, month by month
6
7
8
9
10
11
12
1
2
3
4
5
2024
2025
Stars added on GitHub, per day, on average
Yesterday
+1
Last week
+1.7
/day
Last month
+1.9
/day
Last 12 months
+1.6
/day
npmPackage on NPM
Monthly downloads on NPM
6
7
8
9
10
11
12
1
2
3
4
5
2024
2025
README

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

npm version npm downloads Min gzipped size

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:

Funding

Consider supporting DayPicker's maintainer with a donation. Your support helps keep the project alive and up-to-date.