Multiple Mode

To enable multiple mode, you must set the multiple prop to true.

Just remember that in multiple mode and in the onChange method, instead of a specific date, you get an array of dates. if you have initial values, put them in the array.

In this example, I put today and tomorrow in the array as an initial value.

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

export default function Example() {
  const today = new Date()
  const tomorrow = new Date()

  tomorrow.setDate(tomorrow.getDate() + 1)

  const [values, setValues] = useState([today, tomorrow])

  return (
    <DatePicker 
      multiple
      value={values} 
      onChange={setValues}
    />
  )
}

Custom Separator

the default value of dateSeparator prop in multiple mode is ', '

<DatePicker 
  multiple 
  dateSeparator=" & " 
/>

DatePanel

If you want to enable multiple or range mode, you can also use the DatePanel plugin to have a list of dates.

To view the list of dates, you must import the DatePanel plugin:

import DatePicker from "react-multi-date-picker"
import DatePanel from "react-multi-date-picker/plugins/date_panel"
.
.
.
<DatePicker
  multiple
  plugins={[
   <DatePanel />
  ]}
/>

Sorting Dates

In this example, dates with different types are considered as an initial value and sorted using the sort prop.

import DatePicker from "react-multi-date-picker"
import DatePanel from "react-multi-date-picker/plugins/date_panel"
.
.
.
const [dates, setDates] = useState([
  new Date(),
  new DateObject({ year: 2020, month: 9, day: 8 }),
  "December 09 2020",
  1597994736000 //unix time in milliseconds (August 21 2020)
])
.
.
.
<DatePicker
  value={dates}
  onChange={setDates}
  format="MMMM DD YYYY"
  sort
  plugins={[
    <DatePanel />
  ]}
/>

Multiple Month Picker

<DatePicker
  onlyMonthPicker
  multiple
  sort
  plugins={[
    <DatePanel />
  ]}
/>

Multiple Year Picker

<DatePicker
  onlyYearPicker
  multiple
  sort
  plugins={[
    <DatePanel />
  ]}
/>