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
      mode="single"
      selected={selected}
      onSelect={setSelected}
      footer={
        selected ? `Selected: ${selected.toLocaleDateString()}` : "Pick a day."
      }
    />
  );
}
October 2024
SuMoTuWeThFrSa
Pick a day.

Learn More​

Using DayPicker​

  • 🎨 Styling - Customize the style to match DayPicker with your app's look and feel.
  • ⚙️ Customization - Discover the options available to customize the calendar.
  • 🗓 Months Navigation - Change how users can navigate between months and years.
  • 📅 Selection Modes - Enable users to select days with single, multiple, or range selections.
  • 🌍 Localization - Configure DayPicker to display the calendar in different languages and date formats.
  • 🈳 Translating DayPicker - Translate the labels and messages of the calendar.
  • 🦮 Accessible Date Pickers - Make your date picker accessible to all users.

Guides​

  • 🔤 Input Fields - Learn how to use DayPicker with input fields and form libraries.
  • 📏 Custom Selections - Create custom selection rules.
  • 🏷️ Custom Modifiers - Create custom modifiers to highlight specific days in the calendar.
  • 🛠 Custom Components - Use custom components to create a fully customized date picker.