https://github.com/gpbl/react-day-picker

DayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications.
https://github.com/gpbl/react-day-picker

calendar calendar-component calendar-widget component date-fns date-picker date-picker-range datepicker react react-component

Last synced: 7 days ago
JSON representation

DayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications.

• Host: GitHub
• URL: https://github.com/gpbl/react-day-picker
• Owner: gpbl
• License: mit
• Created: 2014-12-28T17:07:20.000Z (almost 10 years ago)
• Default Branch: main
• Last Pushed: 2024-04-29T12:19:07.000Z (6 months ago)
• Last Synced: 2024-05-02T00:54:22.245Z (6 months ago)
• Topics: calendar, calendar-component, calendar-widget, component, date-fns, date-picker, date-picker-range, datepicker, react, react-component
• Language: TypeScript
• Homepage: https://daypicker.dev
• Size: 316 MB
• Stars: 5,761
• Watchers: 40
• Forks: 693
• Open Issues: 35
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

• awesome-react-components-all - react-day-picker - Flexible date picker for React. (Uncategorized / Uncategorized)
• react-components - react-day-picker
• awesome-react-components - react-day-picker - Flexible date picker for React. (UI Components / Form Components)
• awesome-react - react-day-picker - Flexible date picker for React.  (UI Components / Form Components)
• awesome-list - react-day-picker
• awesome-list - react-day-picker - Flexible date picker for React. (Demos / Form Components)
• awesome-react-components - react-day-picker - Flexible date picker for React. (UI Components / Form Components)
• awesome-react-components - react-day-picker - Flexible date picker for React. (UI Components / Form Components)
• awesome-list - react-day-picker
• awesome-react-components - react-day-picker - Flexible date picker for React. (UI Components / Form Components)
• best-of-react - GitHub - 1% open · ⏱️ 06.06.2024): (Other Components)
• fucking-awesome-react-components - react-day-picker - Flexible date picker for React. (UI Components / Form Components)

README

        
# React DayPicker

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

📖 See **[daypicker.dev](https://daypicker.dev)** for guides, examples and API reference.

## 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, supports [ISO 8601 dates](https://daypicker.dev/docs/localization#iso-week-dates), [time zones](https://daypicker.dev/docs/localization#time-zone), and the [Jalali calendar](https://daypicker.dev/docs/localization#jalali-calendar).

- 🦮 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

```bash

npm install react-day-picker

```



 

## Example

```tsx

import { DayPicker } from "react-day-picker";

import "react-day-picker/style.css";

function MyDatePicker() {

  const [selected, setSelected] = useState();

  return (

    

  );

}

```

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

## Funding

Consider supporting DayPicker's maintainer with a donation. Your support helps keep the project alive and up-to-date.

- 🎗️ [Sponsor DayPicker on GitHub](https://github.com/sponsors/gpbl)