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

Simple date picker built for React and moment.js. See a demo.

npm install react-day-picker --save

Use of modifiers

This date picker works with modifiers, as in BEM-like syntax. You set the modifiers as functions returning true or false.

Modifiers give you a lot of freedom: for example, a selected modifier could highlight a range of selected days, or a weekend modifiers could format the weekend days.

Styling

You need to setup your own CSS. You can start from this css as example.

Usage examples

The following component implements the DayPicker and saves the selected day in its own state. It also adds the daypicker__day--today CSS modifier for today, and a daypicker__day--selected CSS modifier to the cell corresponding to the clicked/touched day.

var DayPicker = require('react-day-picker');
var moment = require('moment');

function isSameDay(a, b) {
  return a.startOf('day').isSame(b.startOf('day'));
}

var MyDatePicker = React.createClass({

  handleDayTouchTap(day, modifiers, event) {
    this.setState({ selectedDay: day });
  },

  render() {
    var modifiers = {
      today: function (day) {
        // add the `today` modifier for the current day
        return isSameDay(moment(), day);
      },
      selected: function (day) {
        // add the `selected` modifier for the selected day
        return this.state.selectedDay
          && isSameDay(this.state.selectedDay, day);
      }
    };
    return (
      <DayPicker modifiers={ modifiers }
        onDayTouchTap={this.handleDayTouchTap} />
    );
  }
});

React.render(<MyDatePicker/>, document.body);

Run the example app

git clone https://github.com/gpbl/react-day-picker.git
cd react-day-picker
npm install
npm start

...then open http://localhost:8080.

API

Props

<DayPicker
  initialMonth={Object}
  enableOutsideDays={Boolean}
  modifiers={Object}
  onDayClick={Function}
  onDayTouchTap={Function}
  onMouseEnter={Function}
  onDayMouseLeave={Function}
  onPrevMonthClick={Function}
  onNextMonthClick={Function}
/>

initialMonth moment object

A moment() object with the month to display in the calendar.

modifiers Object

• The object's keys are the modifier's name – applied to each day, following a BEM-like syntax: daypicker__day--<modifier>
• The key's values are functions evaluated for each day. When they returns true, the modifier is applied, and eventually passed to the onDayTouchTap payload.

For example, the following modifiers will add the CSS class daypicker__day--disabled to the days of the past:

modifiers = {
  disabled: function (day) {
    return day.diff(moment(), 'day') < 0;
  }
}
<DayPicker modifiers={modifiers} />

enableOutsideDays bool

Show the days outside the shown month.

onDayClick function(day, modifiers, event)

onDayTouchTap function(day, modifiers, event)

Use one of these attributes to add an event handler when the user touches/clicks a day.

• day <Object> the touched day (a moment object)
• modifiers <Array> array of modifiers for the touched day, e.g. ['disabled', 'today']
• event <SyntheticEvent> the original touch event

To make the touch tap events working, you must inject react-tap-event-plugin client side.

onDayMouseEnter function(day, modifiers, event)

onDayMouseLeave function(day, modifiers, event)

Use this attribute to add an handler when the mouse enters/leaves a day element.

onPrevMonthClick function(month, event)

onNextMonthClick function(month, event)

• month <Object> the current month (a moment object)
• event <SyntheticEvent> the click event

Use this attribute to add an handler when the user switch to the previous/next month.

Methods

showMonth(month)

Show month (Moment object).