Contain the HTML elements of the calendar and date picker, each of them is stored separately in its own ref.

For example, because the closeCalendar function is in the DatePicker ref. it can be used to closing the calendar from your plugin.

Just note that if the user uses your plugin in the Calendar instead of DatePicker, the DatePicker and datePickerProps will be undefined.

import React from "react";
import DatePicker from "react-multi-date-picker";

function MyPlugin({ DatePicker }) {
  return (
    <div>
      <button
        style={{ margin: "5px" }}
        disabled={!DatePicker}
        onClick={() => DatePicker.closeCalendar()}
      >
        Close
      </button>
    </div>
  );
}

export default function Example() {
  return (
    <DatePicker 
      plugins={[
        <MyPlugin position="bottom" />
      ]} 
    />
  )
}

The point about these two properties is that the value of datePickerProps always takes precedence over the value of calendarProps. Because DatePicker changes some props of Calendar.

To determine whether you should use calendarProps or datePickerProps, it is better to follow the example below:

function MyPlugin({ datePickerProps, calendarProps }) {
  const props = datePickerProps || calendarProps

  ...
}

An object that contains the data that is required by the calendar.

The properties of this object are written in the table below.

Note that the type of any of these properties should not be changed.