File size: 1,586 Bytes
cf86710 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | ---
sidebar_label: Introduction
sidebar_position: 1
slug: /
---
# React DayPicker
DayPicker is a [React](https://react.dev) component to create date pickers, calendars, and date inputs for web applications.
```bash npm2yarn
npm install react-day-picker date-fns
```
## Features
- Provides a minimal design for easy customization.
- Offers extensive props for calendar configuration and customization.
- Supports selection of a single day, multiple days, ranges, or custom selections.
- Can be localized in any language.
- Includes customizable internal components for complex use cases.
DayPicker is written in TypeScript and compiled to CommonJS and ESM. It requires [date-fns](https://date-fns.org) as a peer dependency.
## Example
```tsx
import { DayPicker } from "react-day-picker";
import "react-day-picker/dist/style.css";
function MyDatePicker() {
const [selected, setSelected] = useState<Date>();
return <DayPicker mode="single" selected={selected} onSelect={setSelected} />;
}
```
<BrowserWindow>
<ExamplesV8.Start />
</BrowserWindow>
## License
DayPicker is released under the [MIT License](./license).
## Community
Ask for help and share your experience with DayPicker.
- [Discuss the project on GitHub](https://github.com/gpbl/react-day-picker/discussions)
- [Report an issue on GitHub](https://github.com/gpbl/react-day-picker/issues/new/choose)
## Funding
Consider supporting DayPicker's maintainer with a donation. Your support helps to keep the project alive and keep it updated.
- [Sponsor DayPicker on GitHub](https://github.com/sponsors/gpbl)
|