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 />
]}
/>