Skip to main content
Version: 9.0.0-rc.6

Getting Started

Install the Package

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

npm install react-day-picker@next

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/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."
}
/>
);
}
July 2024
SuMoTuWeThFrSa

Learn More

Using DayPicker

  • Styling - Change the style to make DayPicker match your app's look and feel.
  • Customization - Explore the options available to customize the calendar and the months navigation.
  • 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.
  • Accessible Date Pickers - Make your date picker accessible to all users.

Guides