website/docs/start.mdx

---
pagination_next: docs/styling
---

# Getting Started

## Install the Package

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

```bash npm2yarn
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](./selections/selection-modes.mdx) using the `mode` prop.
3. Use the `selected` and `onSelect` props to control the selected date.

```tsx
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."
      }
    />
  );
}
```

<BrowserWindow sourceUrl="https://github.com/gpbl/react-day-picker/blob/main/examples/Start.tsx">
  <Examples.Start />
</BrowserWindow>

## Learn More

- 📘 [DayPicker Anatomy](./docs/anatomy.mdx) - Understand the parts that make up a DayPicker component.
- 🎮 [DayPicker Playground](/playground) - Experiment with props to explore different customization options.

### Customization

- 🎨 [Styling](./docs/styling.mdx) - Customize the style to match DayPicker with your app's look and feel.
- ⚙️ [Appearance](./docs/appearance.mdx) - Discover the options available to customize the calendar.
- 🗓 [Months Navigation](./docs/navigation.mdx) - Change how users can navigate between months and years.
- 🧩 [Caption and Navigation Layouts](./docs/caption-and-nav-layouts.mdx) - Configure how captions and navigation controls render.
- 🗺️ [Grid and Months](./docs/grid-and-months.mdx) - Control calendar grids and multiple-month layouts.
- 🔢 [Week Numbers and Footer](./docs/week-numbers-and-footer.mdx) - Show week numbers and customize footer content.

### Selecting Days

- 📅 [Selection Modes](./selections/selection-modes.mdx) - Enable users to select days with single, multiple, or range selections.
- 1️⃣ [Single Mode](./selections/single-mode.mdx) - Configure and handle single-date selection.
- 🔁 [Multiple Mode](./selections/multiple-mode.mdx) - Allow selecting multiple dates at once.
- ↔️ [Range Mode](./selections/range-mode.mdx) - Manage start and end date selection ranges.
- 🚫 [Disabling Dates](./selections/disabling-dates.mdx) - Prevent selection of specific days.

### Localization

- 🌍 [Localization](./localization/changing-locale.mdx) - Configure DayPicker to display the calendar in different languages and date formats.
- 🕰️ [Setting Time Zone](./localization/setting-time-zone.mdx) - Render calendars and selections in a specific time zone.
- 🗓️ [ISO and Broadcast Calendars](./localization/iso-and-broadcast.mdx) - Switch between ISO and broadcast calendar systems.
- 🕌 [Persian Calendar](./localization/persian.mdx) - Use the Persian calendar.
- 🛕 [Buddhist (Thai) Calendar](./localization/buddhist.mdx) - Use the Buddhist calendar.
- 🕍 [Hebrew Calendar](./localization/hebrew.mdx) - Use the Hebrew calendar.
- 🕯️ [Ethiopic Calendar](./localization/ethiopic.mdx) - Use the Ethiopic calendar.

### Guides

- 🔤 [Input Fields](./guides/input-fields.mdx) - Learn how to use DayPicker with input fields and form libraries.
- 🕓 [Time Picker](./guides/timepicker.mdx) - Add time selection alongside dates.
- 📏 [Custom Selections](./guides/custom-selections.mdx) - Create custom selection rules.
- 🏷️ [Custom Modifiers](./guides/custom-modifiers.mdx) - Highlight specific days in the calendar using custom modifiers.
- 🛠 [Custom Components](./guides/custom-components.mdx) - Use custom components to create a fully customized date picker.
- 🈳 [Translating DayPicker](./guides/translation.mdx) - Translate the labels and messages of the calendar.
- 🦮 [Accessible Date Pickers](./guides/accessibility.mdx) - Make your date picker accessible to all users.