gpbl / react-day-picker
DayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications.
AI Architecture Analysis
This repository is indexed by RepoMind. By analyzing gpbl/react-day-picker in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.
Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context on-demand, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.
Embed this Badge
Showcase RepoMind's analysis directly in your repository's README.
Repository Summary (README)
PreviewReact DayPicker
DayPicker is a React component for creating date pickers, calendars, and date inputs for web applications.
Documentation
See daypicker.dev for guides, examples and API reference, or read the docs in the repository.
Features
- 🛠 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 days, multiple days, ranges of days, or custom selections.
- 🌍 Can be localized into any language and time zones.
- 🌐 Support for ISO 8601, Persian, Hijri, Buddhist (Thai), Ethiopic, Hebrew and broadcast 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
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 bugs or request features.
Sponsors
Thank you to everyone supporting DayPicker - your sponsorship keeps this project maintained and evolving.
- 🎗️ Become a sponsor: https://github.com/sponsors/gpbl