Skip to main content
Version: 8.10.1

React DayPicker

DayPicker is a React component to create date pickers, calendars, and date inputs for web applications.

npm install react-day-picker date-fns

Features​

  • Provides a minimal design for easy customization.
  • Offers extensive props for calendar configuration and customization.
  • Supports selection of a single day, multiple days, ranges, or custom selections.
  • Can be localized in any language.
  • Includes customizable internal components for complex use cases.

DayPicker is written in TypeScript and compiled to CommonJS and ESM. It requires date-fns as a peer dependency.

Example​

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

function MyDatePicker() {
  const [selected, setSelected] = useState<Date>();
  return <DayPicker mode="single" selected={selected} onSelect={setSelected} />;
}
SuMoTuWeThFrSa

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 to keep the project alive and keep it updated.