The difference between onChange in this package and others is that type of its argument is sent as DateObject instead of Date.

You can easily convert it to Date with the toDate() method.

import { useState } from "react"
import DatePicker from "react-multi-date-picker"

export default function Example() {
  const [value, setValue] = useState()
  
  return (
    <>
      <DatePicker
        value={value}
        onChange={setValue}
      />
      {value?.toDate?.().toString()}
    </>
  )
}

//gregorian calendar & locale
import gregorian from "react-date-object/calendars/gregorian";
import gregorian_en from "react-date-object/locales/gregorian_en";

//persian calendar & locale
import persian from "react-date-object/calendars/persian";
import persian_en from "react-date-object/locales/persian_en";

//arabic calendar & locale
import arabic from "react-date-object/calendars/arabic";
import arabic_en from "react-date-object/locales/arabic_en";

//indian calendar & locale
import indian from "react-date-object/calendars/indian";
import indian_en from "react-date-object/locales/indian_en";
.
.
.
const [state, setState] = useState({ format: "MM/DD/YYYY" })
  
const convert = (date, format = state.format) => {
  let object = { date, format }
  
  setState({
    gregorian: new DateObject(object).format(),
    persian: new DateObject(object).convert(persian, persian_en).format(),
    arabic: new DateObject(object).convert(arabic, arabic_en).format(),
    indian: new DateObject(object).convert(indian, indian_en).format(),
    jsDate: date.toDate(),
    ...object
  })
}
  
const Span = ({ children }) => <span style={{ fontWeight: "bold" }}>{children}</span>

return(
  <div>
    <div>
      <div>
        <Span>click to select: </Span>
        <DatePicker
          value={state.date}
          onChange={convert}
        />
      </div>
      <div>
        <Span>format: </Span>
        <select
          value={state.format}
          onChange={e => convert(state.date, e.target.value)}
          className="select"
        >
          <option>MM/DD/YYYY</option>
          <option>DD-MM-YYYY</option>
          <option>YYYY,MM,DD</option>
          <option>dddd DD MMMM YYYY</option>
          <option>ddd MMM DD YYYY HH:mm:ss</option>
          <option>MMM/DD/YYYY hh:mm:ss a</option>
          <option>MMM/DD/YYYY HH:mm:ss</option>
        </select>
      </div>
      <div>
        <Span>gregorian: </Span>
        <span>{state.gregorian}</span>
      </div>
      <div>
        <Span>solar hijri: </Span>
        <span>{state.persian}</span>
      </div>
      <div>
        <Span>islamic hijri: </Span>
        <span>{state.arabic}</span>
      </div>
      <div>
        <Span>indian: </Span>
        <span>{state.indian}</span>
      </div>
      <div>
        <Span>javascript date: </Span>
        <span>{state.jsDate?.toString?.()}</span>
      </div>
    </div>
  </div>
)

<DatePicker
  multiple
  onChange={array => { //Array of Dateobjecs
    alert("selected dates :\n" + array.join(",\n"))
  }}
/>

If you have a specific condition for opening or closing the calendar, you can use onOpen and onClose events.

If you return false in onOpen, the calendar will not open. Also, if you return false in onClose, the calendar will not close.

const [shouldOpenCalendar, setShouldOpenCalendar] = useState(false)
.
.
.
<div>
  <DatePicker
    onOpen={() => shouldOpenCalendar}
  />
  <label>
    <input
      type="checkbox"
      checked={shouldOpenCalendar}
      onChange={() => setShouldOpenCalendar(!shouldOpenCalendar)}
    />
    Should open calendar
  </label>
</div>

const [shouldCloseCalendar, setShouldCloseCalendar] = useState(false)
.
.
.
<div>
  <DatePicker
    onClose={() => shouldCloseCalendar}
  />
  <label>
    <input
      type="checkbox"
      checked={shouldCloseCalendar}
      onChange={() => setShouldCloseCalendar(!shouldCloseCalendar)}
    />
    Should close calendar
  </label>
</div>

Each time the popper(calendar) position is recalculated, the onChange function is executed in the element-popper.

Because onChange does something else in datepicker, I changed its name to onPositionChange here.

The function you enter in onPositionChange is executed when scrolling, resizing, opening the calendar, or when you call refreshPosition from datepicker ref.

In the onPositionChange function, an object is sent as an argument containing the calculated popper(calendar) and arrow positions, as well as scrollable date picker parent elements.

In this example, the mentioned object is logged in the console and you can view it by opening your browser console (Ctrl + Shift + i, in Chrome browser).

<DatePicker
  onPositionChange={data => console.log(data)}
/>

This feature is suitable for plugins.

Because for some of them, setting the DatePicker props (parent component) from the plugins (child component) is inevitable.

const [props, setProps] = useState({ 
  value: new Date(),
  format: "MM-DD-YYYY",
  onChange: (date) => console.log(date.format()),
});
.
.
.
<DatePicker 
  {...props} 
  onPropsChange={setProps} 
/> 

In this example, setting the currentDate property is optional.

The currentDate property is set to open the calendar in the same selected month.

import React, { useState } from "react";
import DatePicker, { DateObject } from "react-multi-date-picker";

export default function Example() {
  const [dateObject, setDateObject] = useState(
    new DateObject()
  );

  return (
    <>
      <DatePicker
        onMonthChange={(date) => setDateObject(new DateObject(date))}
        onChange={(date) => setDateObject(new DateObject(date))}
        currentDate={dateObject}
      />
      <p>Selected Month: {dateObject.month.name}</p>
    </>
  )
}

like the onMonthChange, a date with the type of DateObject is sent as an argument in onYearChange function.

For example you can use the onYearChange and onMonthChange Props, if you want to implement a DatePicker in which the month and year of the user-selected date changes by changing the month and year of the calendar.

import React, { useState } from "react";
import DatePicker, { DateObject } from "react-multi-date-picker";

export default function Example() {
  const [value, setValue] = useState();

  return (
    <DatePicker
      value={value}
      onChange={setValue}
      onYearChange={updateValue}
      onMonthChange={updateValue}
    />
  )

  function updateValue({ year, month }) {
    setValue(
      new DateObject(value).set({
        day: value.day > month.length ? month.length : value.day,
        month,
        year,
      })
    );
  }
}

import React, { useState } from "react";
import DatePicker from "react-multi-date-picker";
import DatePanel from "react-multi-date-picker/plugins/date_panel";
.
.
.
const [state, setState] = useState({});
.
.
.
<>
  <DatePicker
    multiple
    onFocusedDateChange={(dateFocused, dateClicked) => {
      setState({ dateFocused, dateClicked });
    }}
    onClose={() => setState({})}
    plugins={[<DatePanel markFocused />]}
    
  />
  <div>
    <p>
      <b>Date focused:</b> {state.dateFocused?.format?.()}
    </p>
    <p>
      <b>Date clicked:</b> {state.dateClicked?.format?.()}
    </p>
  </div>
</> 

Date focused:

Date clicked: