Skip to main content

React DayPicker

DayPicker is a React component to create 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."
}
/>
);
}
September 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 to keep the project alive and keep it updated.