Repository files navigation

DayPicker is aReact component for creating date pickers, calendars, and date inputs for web applications.

Seedaypicker.dev for guides, examples and API reference, or readthe docs in the repository.

• 🛠 Extensive set of props forcustomizing the calendar.
• 🎨 Minimal design that can beeasily styled with CSS or any CSS framework.
• 📅 Supportsselections of single days, multiple days, ranges of days, orcustom selections.
• 🌍 Can belocalized into any language andtime zones.
• 🌐 Support forISO 8601,Persian,Buddhist (Thai),Ethiopic,Hebrew andbroadcast calendar.
• 🦮 Complies with WCAG 2.1 AA requirements foraccessibility.
• ⚙️Customizable components to extend the rendered elements.
• 🔤 Easy integrationwith input fields.

DayPicker is written in TypeScript and compiled to CommonJS and ESM. It relies ondate-fns for date manipulation and formatting.

npm install react-day-picker

import{DayPicker}from"react-day-picker";import"react-day-picker/style.css";functionMyDatePicker(){const[selected,setSelected]=useState<Date>();return(<DayPickermode="single"selected={selected}onSelect={setSelected}footer={selected ?`Selected:${selected.toLocaleDateString()}` :"Pick a day."}/>);}

DayPicker is compatible with React 16.8 and later.

DayPicker is released under theMIT License.

Ask for help and share your experience with DayPicker:

• 💬Discussion forums - Get support and provide feedback.
• 🪳Report an issue - Report bugs or request features.

Thank you to everyone supporting DayPicker - your sponsorship keeps this project maintained and evolving.

• 🎗️ Become a sponsor:https://github.com/sponsors/gpbl