What is react-day-picker?
The react-day-picker package is a flexible date picker component for React applications. It allows users to select dates or ranges of dates within a calendar interface. It is customizable and can be used to create various date-picking experiences in web applications.
What are react-day-picker's main functionalities?
Single Date Selection
This feature allows users to select a single date from the calendar. The 'onDayClick' event handler updates the state with the selected date.
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';
function MyDatePicker() {
const [selectedDay, setSelectedDay] = useState();
return (
<DayPicker
selectedDays={selectedDay}
onDayClick={(day) => setSelectedDay(day)}
/>
);
}
Range Selection
This feature enables users to select a range of dates. The 'DateUtils.addDayToRange' function is used to update the range state.
import DayPicker, { DateUtils } from 'react-day-picker';
import 'react-day-picker/lib/style.css';
function MyDateRangePicker() {
const [range, setRange] = useState({ from: undefined, to: undefined });
const handleDayClick = (day) => {
const range = DateUtils.addDayToRange(day, this.state.range);
setRange(range);
};
return (
<DayPicker
selectedDays={[range.from, { from: range.from, to: range.to }]}
onDayClick={handleDayClick}
/>
);
}
Customization
This feature allows for extensive customization of the calendar's appearance and behavior, including custom class names and replacing default components with custom ones.
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';
function MyStyledDatePicker() {
return (
<DayPicker
className='my-custom-class'
weekdayElement={<div>Custom Weekday</div>}
navbarElement={<div>Custom Navbar</div>}
/>
);
}
Other packages similar to react-day-picker
react-datepicker
react-datepicker is a comprehensive date picker library for React. It offers similar functionalities to react-day-picker, such as single date selection, range selection, and customization options. It also provides additional features like time selection and predefined date ranges.
material-ui-pickers
material-ui-pickers is a set of components that implement Material Design pickers for date and time in React. It integrates well with Material-UI and offers a different look and feel compared to react-day-picker, with similar functionality for date selection.
antd
antd, or Ant Design, is a UI design language and React UI library that includes a DatePicker component. It offers a wide range of features and is designed to work within the Ant Design system, providing a different user experience compared to react-day-picker.
React DayPicker
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.
Features
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
![Min gzipped size](https://img.shields.io/bundlephobia/minzip/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.
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.