Awesome
React DayPicker
DayPicker is a React component to create date pickers, calendars, and date inputs for web applications.
📖 See daypicker.dev for guides, examples and API reference.
Features
- 🛠 An extensive set of props for customizing the calendar.
- 🎨 Minimal design that can be easily styled with CSS or any CSS framework.
- 📅 Supports selections of single day, multiple days, ranges of days, or custom selections.
- 🌍 Can be localized into any language, supports ISO 8601 dates, UTC dates, and Jalali calendar.
- 🦮 Complies with WCAG 2.1 AA requirements for accessibility.
- ⚙️ Customizable components to extend the rendered elements.
- 🔤 Easy integration with input fields.
DayPicker is written in TypeScript and compiled to CommonJS and ESM. It relies on date-fns for date manipulation and formatting.
Installation
npm install react-day-picker
<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> <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"/>
Example
import { DayPicker } from "react-day-picker";
import "react-day-picker/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.
Community
Ask for help and share your experience with DayPicker.
- 💬 Discussion forums - get support and provide feedback.
- 🪳 Report an issue - report a bug or a feature request.
Funding
Consider supporting DayPicker's maintainer with a donation. Your support helps to keep the project alive and keep it updated.