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.
- Minimal design for easy customization.
- Extensive props for configuring the calendar.
- Supports selection of a single day, multiple days, ranges, or custom selections.
- Can be localized in any language.
- Complies with WCAG 2.1 AA requirements for accessibility.
- Includes customizable internal components for complex use cases.
DayPicker is written in TypeScript and compiled to CommonJS and ESM. It requires date-fns as a peer dependency.
npm install react-day-picker date-fns
import { DayPicker } from "react-day-picker";
import "react-day-picker/dist/style.css";
function MyDatePicker() {
const [selected, setSelected] = useState();
return <DayPicker mode="single" selected={selected} onSelect={setSelected} />;
}DayPicker is released under the MIT License.
Ask for help and share your experience with DayPicker.
Consider supporting DayPicker's maintainer with a donation. Your support helps to keep the project alive and keep it updated.