| 1 | # React DayPicker
|
| 2 |
|
| 3 | DayPicker is a [React](https://react.dev) component to create date pickers, calendars, and date inputs for web applications.
|
| 4 |
|
| 5 | 📖 See **[daypicker.dev](https://daypicker.dev)** for guides, examples and API reference.
|
| 6 |
|
| 7 | ## Features
|
| 8 |
|
| 9 | - 🛠 An extensive set of props for [customizing](./docs/customization.mdx) the calendar.
|
| 10 | - 🎨 Minimal design that can be [easily styled](./docs/styling.mdx) with CSS or any CSS framework.
|
| 11 | - 📅 Supports [selections](./docs/selection-modes.mdx) of single day, multiple days, ranges of days, or [custom selections](./guides/custom-selections.mdx).
|
| 12 | - 🌍 Can be [localized](./docs/localization.mdx) into any language, supports [ISO 8601 dates](./docs/localization.mdx#iso-week-dates), [UTC dates](./docs/localization.mdx#utc-dates), and [Jalali calendar](./docs/localization.mdx#jalali-calendar).
|
| 13 | - 🦮 Complies with WCAG 2.1 AA requirements for [accessibility](./docs/accessibility.mdx).
|
| 14 | - ⚙️ [Customizable components](./guides/custom-components.mdx) to extend the rendered elements.
|
| 15 | - 🔤 Easy integration [with input fields](./guides/input-fields.mdx).
|
| 16 |
|
| 17 | 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.
|
| 18 |
|
| 19 | ## Installation
|
| 20 |
|
| 21 | ```bash
|
| 22 | npm install react-day-picker
|
| 23 | ```
|
| 24 |
|
| 25 | <a href="https://www.npmjs.com/package/react-day-picker"><img src="https://img.shields.io/npm/v/react-day-picker" alt="npm version"/></a>
|
| 26 | <img src="https://img.shields.io/npm/dm/react-day-picker.svg" alt="npm downloads"/> <img src="https://img.shields.io/bundlephobia/minzip/react-day-picker" alt="Min gzipped size"/>
|
| 27 |
|
| 28 | ## Example
|
| 29 |
|
| 30 | ```tsx
|
| 31 | import { DayPicker } from "react-day-picker";
|
| 32 | import "react-day-picker/style.css";
|
| 33 |
|
| 34 | function MyDatePicker() {
|
| 35 | const [selected, setSelected] = useState<Date>();
|
| 36 |
|
| 37 | return (
|
| 38 | <DayPicker
|
| 39 | mode="single"
|
| 40 | selected={selected}
|
| 41 | onSelect={setSelected}
|
| 42 | footer={
|
| 43 | selected ? `Selected: ${selected.toLocaleDateString()}` : "Pick a day."
|
| 44 | }
|
| 45 | />
|
| 46 | );
|
| 47 | }
|
| 48 | ```
|
| 49 |
|
| 50 | ## Compatibility
|
| 51 |
|
| 52 | DayPicker is compatible with React 16.8 and later.
|
| 53 |
|
| 54 | ## License
|
| 55 |
|
| 56 | DayPicker is released under the [MIT License](./license).
|
| 57 |
|
| 58 | ## Community
|
| 59 |
|
| 60 | Ask for help and share your experience with DayPicker.
|
| 61 |
|
| 62 | - 💬 [Discussion forums](https://github.com/gpbl/react-day-picker/discussions) - get support and provide feedback.
|
| 63 | - 🪳 [Report an issue](https://github.com/gpbl/react-day-picker/issues/new/choose) - report a bug or a feature request.
|
| 64 |
|
| 65 | ## Funding
|
| 66 |
|
| 67 | Consider supporting DayPicker's maintainer with a donation. Your support helps to keep the project alive and keep it updated.
|
| 68 |
|
| 69 | - 🎗️ [Sponsor DayPicker on GitHub](https://github.com/sponsors/gpbl)
|