Skip to main content
Version: 10.0.0-next.6

Getting Started

Install the Package​

DayPicker is available as the @daypicker/react npm package.

npm install @daypicker/react@next
Legacy package name

The react-day-picker package name remains available in v10 for compatibility, but new projects should install and import from @daypicker/react.

Basic Usage​

To add a simple date picker to your app:

  1. Import the component and styles from @daypicker/react.
  2. Choose a selection mode using the mode prop.
  3. Use the selected and onSelect props to control the selected date.
import { useState } from "react";

import { DayPicker } from "@daypicker/react";
import "@daypicker/react/style.css";

export function MyDatePicker() {
  const [selected, setSelected] = useState<Date>();

  return (
    <DayPicker
      animate
      mode="single"
      selected={selected}
      onSelect={setSelected}
      footer={
        selected ? `Selected: ${selected.toLocaleDateString()}` : "Pick a day."
      }
    />
  );
}
View source

Learn More​

  • 📘 DayPicker Anatomy - Understand the parts that make up a DayPicker component.
  • 🎮 DayPicker Playground - Experiment with v10 and see the code update in real time.
  • 📚 API Reference - Browse the v10 props, components, labels, utilities, and calendar package APIs.

Customization​

Selecting Days​

  • 📅 Selection Modes - Enable users to select days with single, multiple, or range selections.
  • 1️⃣ Single Mode - Configure and handle single-date selection.
  • 🔁 Multiple Mode - Allow selecting multiple dates at once.
  • ↔️ Range Mode - Manage start and end date selection ranges.
  • 🚫 Disabling Dates - Prevent selection of specific days.

Localization​

Guides​