Skip to main content

React DayPicker

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

Features

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

Example

./MyDatePicker.jsx
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."
}
/>
);
}
October 2024
SuMoTuWeThFrSa

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:

Funding

Consider supporting DayPicker's maintainer with a donation. Your support helps keep the project alive and up-to-date.