Package Exports
- react-day-picker
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-day-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
React 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, 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.
Funding
Consider supporting DayPicker's maintainer with a donation. Your support helps keep the project alive and up-to-date.