# React DayPicker

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

`@daypicker/react` is the preferred package name for DayPicker v10 and newer.

## Documentation

See **[daypicker.dev](https://daypicker.dev)** for guides, examples, and API reference, or read [the v10 docs in the repository](https://github.com/gpbl/react-day-picker/blob/main/apps/website/docs/start.mdx).


  
  
  


## Features

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

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.

## Installation

Install the preferred DayPicker package name:

```bash
npm install @daypicker/react
```

[](https://www.npmjs.com/package/@daypicker/react)  

## Example

```tsx
import { useState } from "react";

import { DayPicker } from "@daypicker/react";
import "@daypicker/react/style.css";

function MyDatePicker() {
  const [selected, setSelected] = useState<Date>();

  return (
    <DayPicker
      mode="single"
      selected={selected}
      onSelect={setSelected}
      footer={
        selected ? `Selected: ${selected.toLocaleDateString()}` : "Pick a day."
      }
    />
  );
}
```

## Compatibility

DayPicker is compatible with React 16.8 and later.

## License

DayPicker is released under the [MIT License](https://daypicker.dev/license).

## 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.


  [](https://github.com/AlexKDawson)
  [](https://github.com/amplify-education)
  [](https://github.com/bedandbreakfasteu)
  [](https://github.com/CHECK24)
  [](https://github.com/dimitur2204)
  [](https://github.com/flexbox)
  [](https://github.com/github)
  [](https://github.com/indeedeng)
  [](https://github.com/katyabilokur)
  [](https://github.com/severinlandolt)
  [](https://github.com/syntaxfm)
  [](https://github.com/Thinkmill)
  [](https://github.com/thnxdev)
  [](https://github.com/tjfred35)
  [](https://github.com/wilsonadenuga)


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