react-day-picker

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.

README

react-day-picker is a flexible date picker component for React.

• no external dependencies
• select days, ranges, whatever using CSS modifiers
• ready for i18n, with moment.js or any other library
• customizable style
• navigable via keyboard, ARIA support

Check out the examples to see its features.

Quick start

Install via npm

npm install react-day-picker --save

Install via Bower

bower install react-day-picker --save

The bower package exposes a global DayPicker variable.

Example

import React from 'react';
import DayPicker, { DateUtils } from "react-day-picker";

function sunday(day) {
  return day.getDay() === 0;
}

class MyComponent extends React.Component {
  state = {
    selectedDay: new Date(),
  }
  handleDayClick(e, day, { selected, disabled }) {
    if (disabled) {
      return;
    }
    if (selected) {
      this.setState({ selectedDay: null })
    } else {
      this.setState({ selectedDay: day });
    }
  },
  render() {
    return (
      <DayPicker
        initialMonth={ new Date(2016, 1) }
        disabledDays={ sunday }
        selectedDays={ day => DateUtils.isSameDay(this.state.selectedDay, day) }
        onDayClick={ this.handleDayClick.bind(this) }
    />);
  }
}

See Basic usage for a deeper explanation of the example above.

Docs and examples

• Examples with code
• Documentation
  • Basic usage
  • Use of modifiers
  • API
  • Styling
  • Localization
  • Tips
  • Utilities
• Changelog

Get support

• Tag with react-day-picker your questions on Stackoverflow
• Join the Gitter room for immediate help

Contribute

• File bugs and feature requests in the issues page
• Check out the source code on Github
• Pull requests are welcome! If you are planning a pull request with lot of changes, please add an issue to discuss your idea first
  • See how to start the project locally here

Changelog

v2.5.0

Release Date: 2016-10-06

• Build dist files as UMD module (#216 by pguimera).