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 and 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

An object whose keys will be used as CSS modifiers for the day cells. The key's values are functions being evaluated when printing each day cell: 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 modifier:

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.