Installation

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

Install from npm

$ npm install react-day-picker date-fns

Basic Usage

To start using DayPicker, import the <DayPicker /> component and its default style. Assign the selected and onSelect props to manage the selected date.

import "react-day-picker/style.css"; // Import the default style
import { DayPicker } from "react-day-picker";
 
import { useState } from "react";
 
export function App() {
  const [selected, setSelected] = useState();
 
  return (
    <div role="application" aria-label="Date Picker">
      <DayPicker mode="single" selected={selected} onSelect={setSelected} />
    </div>
  );
}

Getting Started

Get started with DayPicker by reading the following guides.

• DayPicker Anatomy - Learn about the different parts of the DayPicker component.

Using DayPicker

• Customization Props - Read about the options available to customize the calendar and the months navigation.
• Selection Modes - Allow users to select days by enabling single, multiple or range selections.
• Styling - Change the style to make DayPicker match your app's look and feel.
• Localization - Configure DayPicker to display the calendar in different languages and date formats.
• Accessible Date Pickers - Make your date picker accessible to all users, including those using screen readers.
• DayPicker Playground - Play with the props to try the different customization options.

Advanced Guides

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