Getting Started

Install the Package

DayPicker is available as react-day-picker npm package. It requires date-fns as a peer dependency.

npm

npm install react-day-picker date-fns

Yarn

yarn add react-day-picker date-fns

pnpm

pnpm add react-day-picker date-fns

• See #1087 if you are interested in DayPicker supporting different date libraries.

Basic Usage

To create a simple date picker calendar,

1. Import the component and its default style from react-day-picker.
2. Choose a selection mode using the mode prop.
3. Assign the selected and onSelect props to manage the selected date.

import { useState } from "react";

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

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