Skip to main content

Getting Started

Install the Package​

DayPicker is available as the react-day-picker npm package.

npm install react-day-picker

Basic Usage​

To add a simple date picker to your app:

  1. Import the component and styles from react-day-picker.
  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 "react-day-picker";
import "react-day-picker/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."
      }
    />
  );
}

Learn More​

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​