Range Picker
const [values, setValues] = useState([
new DateObject().subtract(4, "days"),
new DateObject().add(4, "days")
])
.
.
.
<DatePicker
value={values}
onChange={setValues}
range
/>Custom Separator
the default value of dateSeparator prop in range mode is ' ~ '
<DatePicker
range
dateSeparator=" to "
/>Range Hover Effect
const [values, setValues] = useState([
new DateObject()
])
.
.
.
<Calendar
value={values}
onChange={setValues}
range
rangeHover
/>DatePanel
import DatePanel from "react-multi-date-picker/plugins/date_panel"
.
.
.
<DatePicker
range
plugins={[
<DatePanel />
]}
/>Displaying Each Days In Range
As you can see in the example above, in range mode, only the start and end dates are displayed in the date panel.
But if you want to see every single date between the start and end date in the date panel, you can use the eachDaysInRange Prop.
Similarly, in onChange, only the start and end dates are given, and if you want to have separate dates between the start and end dates, you can use the getAllDatesInRange function.
Just keep in mind that enabling eachDaysInRange property in large ranges of dates may cause slow rendering, so it's a good idea to limit your DatePicker with minDate and maxDate.
In the example below, the DatePicker is limited to the beginning and end of the current month.
import DatePicker, { DateObject, getAllDatesInRange } from "react-multi-date-picker"
import DatePanel from "react-multi-date-picker/plugins/date_panel"
.
.
.
const [dates, setDates] = useState([])
const [allDates, setAllDates] = useState([])
.
.
.
<div>
<DatePicker
range
calendarPosition="top-left"
fixMainPosition
value={dates}
minDate={new DateObject().toFirstOfMonth()}
maxDate={new DateObject().toLastOfMonth()}
onChange={dateObjects => {
setDates(dateObjects)
setAllDates(getAllDatesInRange(dateObjects))
}}
plugins={[
<DatePanel eachDaysInRange />
]}
/>
{dates.length > 1 &&
<div>
<h5>
All Dates between {dates[0].format()} and {dates[1].format()}:
</h5>
<ul>
{allDates.map((date, index) => <li key={index}>{date.format()}</li>)}
</ul>
</div>
}
</div>