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

A minimalistic date picker built for React and moment.js. Supports CSS modifiers, touch and keyboard events.

See demo.

npm install 'react-day-picker' --save

Usage example

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) {
    if (modifiers.indexOf('disabled') === -1)
      alert('You tapped ' + day.format());
  },
  render() {
    var modifiers = {
      today: function (day) {
        // Add --today CSS modifier for the current day
        return isSameDay(moment(), day);
      }
    };
    return (
        <DayPicker 
          initialMonth={ moment() } 
          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 run example

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

API

initialMonth moment object

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

modifiers Object

CSS modifiers are useful to customize the aspect of a day element. You pass an object whose keys are used as CSS class for each day. The key's values are functions being evaluated when rendering a day element: if the function returns true (or a truthy value), the modifier is added to the day cell as daypicker__day--<modifier> className.

For example, the following modifiers:

modifiers = {
  disabled: function (day) {
    return day.diff(moment(), 'day') < 0;
  },
  all: function (day) {
    return true;
  }
}

will add the CSS class daypicker__day--disabled to the days of the past, and the daypicker__day--all CSS class to all the days (since it returns always true).

onDayTouchTap function(day, modifiers, event)

Use this attribute to add an handler when the user touches a day.

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

onDayMouseEnter function(day, modifiers, event)

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

onDayMouseLeave function(day, modifiers, event)

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