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
- 🛠 An extensive set of props for configuring and customizing the calendar.
- 🎨 A minimal design that can be easily styled with CSS or any CSS framework.
- 📅 Supports selections of single day, multiple days, ranges of days, or custom selections.
- 🌍 Can be localized into any language.
- 📆 Supports for ISO 8601 dates, UTC dates, and Jalali Calendar.
- ♿ Complies with WCAG 2.1 AA requirements for accessibility.
- ⚙️ Customizable internal components for complex use cases.
DayPicker is written in TypeScript and compiled to CommonJS and ESM.
Installation
npm install react-day-picker
![Min gzipped size](https://img.shields.io/bundlephobia/minzip/react-day-picker)
Usage
import { DayPicker } from "react-day-picker";
import "react-day-picker/dist/style.css";
function MyDatePicker() {
const [selected, setSelected] = useState<Date | undefined>();
return <DayPicker mode="single" selected={selected} onSelect={setSelected} />;
}
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.