Getting Started
Install the Package
DayPicker is available as the react-day-picker
npm package.
- npm
- Yarn
- pnpm
npm install react-day-picker
yarn add react-day-picker
pnpm add react-day-picker
Basic Usage
To add a simple date picker to your app:
- Import the component and styles from
react-day-picker
. - Choose a selection mode using the
mode
prop. - Use the
selected
andonSelect
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."
}
/>
);
}
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
Learn More
- 📘 DayPicker Anatomy - Understand the parts that make up a DayPicker component.
- 🎮 DayPicker Playground - Experiment with props to explore different customization options.
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.