Add a Date Picker with Airbnb’s React Dates Package

We can add a date picker easily with Airbnb’s React Dates packages.

In this article, we’ll look at how to use it to add a date picker.

Installation

We install the required packages by running:

npm install --save react-dates moment

Basic Datepicker

We add the date picker to our React component by writing:

import React from "react";
import "react-dates/initialize";
import { DateRangePicker } from "react-dates";
import "react-dates/lib/css/_datepicker.css";

export default function App() {
  const [startDate, setStartDate] = React.useState();
  const [endDate, setEndDate] = React.useState();
  const [focusedInput, setFocusedInput] = React.useState();
  return (
    <div className="App">
      <DateRangePicker
        startDate={startDate}
        startDateId="start-date"
        endDate={endDate}
        endDateId="end-date"
        onDatesChange={({ startDate, endDate }) => {
          setStartDate(startDate);
          setEndDate(endDate);
        }}
        focusedInput={focusedInput}
        onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}
      />
    </div>
  );
}

We import the react-dates/initialize package to run the initialization code.

And we import the CSS.

We add the date picker with the DateRangePicker component.

The listed props are all required.

startDate has the start date.

startDateId is the ID of the start date field.

endDate has the end date.

endDateId is the ID of the end date field.

onDatesChanges lets us update the start and end date states.

focusedInput sets whether the input is focused.

onFocusChange has the function to set the focusedInput state to set which field is focused.

Overriding Styles

We can override the styles by setting styles for a few classes.

For example, we can write:

styles.css

.CalendarDay__selected_span {
  background: #82e0aa;
  color: white;
  border: 1px solid lightred;
}

.CalendarDay__selected {
  background: red;
  color: white;
}

.CalendarDay__selected:hover {
  background: orange;
  color: white;
}

.CalendarDay__hovered_span:hover,
.CalendarDay__hovered_span {
  background: brown;
}

CalendarDay__selected_span is the class for the calendar boxes in between the dates.

CalendarDay__selected is the class for the selected start date.

CalendarDay__selected:hover is the pseudoclass for the selected start date when we hover over it.

CalendarDay__hovered_span sets the color for the end date box.

SingleDatePicker

We can also add the SingleDatePicker if we only want to pick a single date.

For example, we can write:

import React from "react";
import "react-dates/initialize";
import { SingleDatePicker } from "react-dates";
import "react-dates/lib/css/_datepicker.css";

export default function App() {
  const [date, setDate] = React.useState();
  const [focused, setFocused] = React.useState();
  return (
    <div className="App">
      <SingleDatePicker
        date={date}
        onDateChange={(date) => setDate(date)}
        focused={focused}
        onFocusChange={({ focused }) => setFocused(focused)}
        id="date"
      />
    </div>
  );
}

We add the SingleDatePicker component to add the date picker.

date has the date.

onDateChange lets us set the date.

focused has the focus date.

onFocusChanged lets us change the focus state.

id has the ID of the date field.

Conclusion

We can add a simple date range and date picker with the react-dates library.