Core Concepts

Now that you've installed the package. It's the time to get familiarized with the core concepts of react-modern-calendar-datepicker. In a nutshell, there are two major components available to import:

1- <DatePicker /> default-exported component which includes an input and a calendar.
2- <Calendar /> component which is the calendar itself.

These components are similar in many cases. <DatePicker /> just includes an extra input in comparison with <Calendar />. The simple rule is:

You can use almost every prop on both <DatePicker /> and <Calendar /> components.

Note: To turn this calendar into a another language locale one, add this prop.

By the way, all the examples provided in this document are implemented using React hooks .

Basic Usage

Let's kick things off by providing an example:

import React, { useState } from "react";
import "react-modern-calendar-datepicker/lib/DatePicker.css";
import DatePicker from "react-modern-calendar-datepicker";

const App = () => {
  const [selectedDay, setSelectedDay] = useState(null);
  return (
    <DatePicker
      value={selectedDay}
      onChange={setSelectedDay}
      inputPlaceholder="Select a day"
      shouldHighlightWeekends
    />
  );
};

export default App;

Without the input:

import React, { useState } from "react";
import "react-modern-calendar-datepicker/lib/DatePicker.css";
import { Calendar } from "react-modern-calendar-datepicker";

const App = () => {
  const [selectedDay, setSelectedDay] = useState(null);
  return (
    <Calendar
      value={selectedDay}
      onChange={setSelectedDay}
      shouldHighlightWeekends
    />
  );
};

export default App;

SMTWTFS

- value prop is the value of the date picker and the shape of its initial value, defines the date picker type(single, range, multiple)

-onChange is the function which will take care of changing the state using the state hook modifier. All day formats in the picker are like:

PropTypes.shape({
  year: PropTypes.number.isRequired,
  month: PropTypes.number.isRequired,
  day: PropTypes.number.isRequired,
})

For a more detailed list of props, visit props list.

Selecting a Day Range

To turn out the picker into a range picker, you need to change the initial value. Here's an example:

import React, { useState } from "react";
import "react-modern-calendar-datepicker/lib/DatePicker.css";
import { Calendar } from "react-modern-calendar-datepicker";

const App = () => {
  // ✅ a change in default state: { from: ..., to: ... }
  const [selectedDayRange, setSelectedDayRange] = useState({
    from: null,
    to: null
  });
  return (
    <Calendar
      value={selectedDayRange}
      onChange={setSelectedDayRange}
      shouldHighlightWeekends
    />
  );
};

export default App;

SMTWTFS

We've used from on the default state to indicate the starting point of the day range, and to for the ending point of the day range. Note that you can replace <Calendar /> with<DatePicker /> to have the input along with the calendar:

import React, { useState } from "react";
import "react-modern-calendar-datepicker/lib/DatePicker.css";
import DatePicker from "react-modern-calendar-datepicker";

const App = () => {
  const [selectedDayRange, setSelectedDayRange] = useState({
    from: null,
    to: null
  });
  return (
    <DatePicker
      value={selectedDayRange}
      onChange={setSelectedDayRange}
      inputPlaceholder="Select a day range"
      shouldHighlightWeekends
    />
  );
};

export default App;

Selecting Multiple Dates

You pass a [] as a default value, it becomes a multiple date selector.

import React, { useState } from "react";
      import "react-modern-calendar-datepicker/lib/DatePicker.css";
      import { Calendar } from "react-modern-calendar-datepicker";

      const App = () => {
        // ✅ a change in default state: []
        const [selectedDays, setSelectedDays] = useState([]);
        return (
          <Calendar
            value={selectedDays}
            onChange={setSelectedDays}
            shouldHighlightWeekends
          />
        );
      };

      export default App;

SMTWTFS

Simple as that! as mentioned above, the shape of value prop defines the date picker type. Here we passed an empty array.

Recap

So far so good. By now, you should feel pretty comfortable with this picker. In this part, you used null as the default value for the single date picker, { from: null, to: null } as the default value for the range date picker, and [] as the default value for the mutliple date picker. In the next part, you'll learn more about default values.