website/docs/intro.mdx

---
title: Date Picker Component for React
sidebar_label: Introduction
sidebar_position: 1
slug: /
---

# React DayPicker

DayPicker is a [React](https://react.dev) component for creating date pickers, calendars, and date inputs for web applications.

## Features

- 🛠 Extensive set of props for [customizing](./docs/appearance.mdx) the calendar.
- 🎨 Minimal design that can be [easily styled](./docs/styling.mdx) with CSS or any CSS framework.
- 📅 Supports [selections](./selections/selection-modes.mdx) of single days, multiple days, ranges of days, or [custom selections](./guides/custom-selections.mdx).
- 🌍 Can be [localized](./localization/changing-locale.mdx) into any language and [time zones](./localization/setting-time-zone.mdx).
- 🌐 Support for [ISO 8601](./localization/iso-and-broadcast#iso-8601-calendar), [Persian](./localization/persian), [Buddhist (Thai)](./localization/buddhist), [Ethiopic](./localization/ethiopic), [Hebrew](./localization/hebrew) and [broadcast](./localization/iso-and-broadcast#broadcast-calendar) calendar.
- 🦮 Complies with WCAG 2.1 AA requirements for [accessibility](./guides/accessibility.mdx).
- ⚙️ [Customizable components](./guides/custom-components.mdx) to extend the rendered elements.
- 🔤 Easy integration [with input fields](./guides/input-fields.mdx).

DayPicker is written in TypeScript and compiled to CommonJS and ESM. It relies on [date-fns](https://date-fns.org) for date manipulation and formatting.

## Example

```tsx title="./MyDatePicker.jsx"
import { DayPicker } from "react-day-picker";
import "react-day-picker/style.css";

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>

## Compatibility

DayPicker is compatible with React 16.8 and later.

## License

DayPicker is released under the [MIT License](./license.mdx).

## Community

Ask for help and share your experience with DayPicker:

- 💬 [Discussion forums](https://github.com/gpbl/react-day-picker/discussions) - Get support and provide feedback.
- 🪳 [Report an issue](https://github.com/gpbl/react-day-picker/issues/new/choose) - Report bugs or request features.

## Sponsors

Thank you to everyone supporting DayPicker — your sponsorship keeps this project maintained and evolving.

<p>
  <a href="https://github.com/CHECK24" title="CHECK24">
    <img
      src="https://github.com/CHECK24.png?size=64"
      alt="CHECK24"
      width={48}
      height={48}
      style={{ borderRadius: "50%", margin: 4 }}
    />
  </a>
  <a href="https://github.com/wilsonadenuga" title="wilsonadenuga">
    <img
      src="https://github.com/wilsonadenuga.png?size=64"
      alt="wilsonadenuga"
      width={48}
      height={48}
      style={{ borderRadius: "50%", margin: 4 }}
    />
  </a>
  <a href="https://github.com/severinlandolt" title="severinlandolt">
    <img
      src="https://github.com/severinlandolt.png?size=64"
      alt="severinlandolt"
      width={48}
      height={48}
      style={{ borderRadius: "50%", margin: 4 }}
    />
  </a>
  <a href="https://github.com/syntaxfm" title="syntaxfm">
    <img
      src="https://github.com/syntaxfm.png?size=64"
      alt="syntaxfm"
      width={48}
      height={48}
      style={{ borderRadius: "50%", margin: 4 }}
    />
  </a>
  <a href="https://github.com/thnxdev" title="thnxdev">
    <img
      src="https://github.com/thnxdev.png?size=64"
      alt="thnxdev"
      width={48}
      height={48}
      style={{ borderRadius: "50%", margin: 4 }}
    />
  </a>
  <a href="https://github.com/katyabilokur" title="katyabilokur">
    <img
      src="https://github.com/katyabilokur.png?size=64"
      alt="katyabilokur"
      width={48}
      height={48}
      style={{ borderRadius: "50%", margin: 4 }}
    />
  </a>
  <a href="https://github.com/bedandbreakfasteu" title="bedandbreakfasteu">
    <img
      src="https://github.com/bedandbreakfasteu.png?size=64"
      alt="bedandbreakfasteu"
      width={48}
      height={48}
      style={{ borderRadius: "50%", margin: 4 }}
    />
  </a>
  <a href="https://github.com/Thinkmill" title="Thinkmill">
    <img
      src="https://github.com/Thinkmill.png?size=64"
      alt="Thinkmill"
      width={48}
      height={48}
      style={{ borderRadius: "50%", margin: 4 }}
    />
  </a>
  <a href="https://github.com/AlexKDawson" title="AlexKDawson">
    <img
      src="https://github.com/AlexKDawson.png?size=64"
      alt="AlexKDawson"
      width={48}
      height={48}
      style={{ borderRadius: "50%", margin: 4 }}
    />
  </a>
  <a href="https://github.com/dimitur2204" title="dimitur2204">
    <img
      src="https://github.com/dimitur2204.png?size=64"
      alt="dimitur2204"
      width={48}
      height={48}
      style={{ borderRadius: "50%", margin: 4 }}
    />
  </a>
  <a href="https://github.com/indeedeng" title="indeedeng">
    <img
      src="https://github.com/indeedeng.png?size=64"
      alt="indeedeng"
      width={48}
      height={48}
      style={{ borderRadius: "50%", margin: 4 }}
    />
  </a>
  <a href="https://github.com/flexbox" title="flexbox">
    <img
      src="https://github.com/flexbox.png?size=64"
      alt="flexbox"
      width={48}
      height={48}
      style={{ borderRadius: "50%", margin: 4 }}
    />
  </a>
  <a href="https://github.com/github" title="github">
    <img
      src="https://github.com/github.png?size=64"
      alt="github"
      width={48}
      height={48}
      style={{ borderRadius: "50%", margin: 4 }}
    />
  </a>
  <a href="https://github.com/tjfred35" title="tjfred35">
    <img
      src="https://github.com/tjfred35.png?size=64"
      alt="tjfred35"
      width={48}
      height={48}
      style={{ borderRadius: "50%", margin: 4 }}
    />
  </a>
</p>

- 🎗️ Become a sponsor: https://github.com/sponsors/gpbl