برای فعال شدن انتخاب چند زمان باید پراپرتی multiple رو برابر با true کنید.

فقط یادتون باشه که در حالت multiple و در متد onChange به جای یک date خاص ، آرایه ای از زمان ها رو دریافت میکنید، اگر هم میخواید مقادیری رو از قبل تعریف کنید اونهارو داخل آرایه قرار بدید.

من تو این مثال امروز و فردا رو داخل آرایه قرار میدم تا ببینید چجوری میشه بعد تو پروژه خودتون تغییرش بدید یا حذفش کنید.

import { useState } from "react"
import DatePicker from "react-multi-date-picker"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

export default function Example() {
  const [values, setValues] = useState([
    new DateObject({ calendar: persian, locale: persian_fa }) //امروز,
    new DateObject({ calendar: persian, locale: persian_fa }).add(1, "day") //فردا
  ])

  return (
    <DatePicker 
      multiple
      value={values} 
      onChange={setValues}
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-right"
    />
  )
}

مقدار پیش فرض پراپ dataSeparator در حالت چندگانه '، ' است

<DatePicker 
  multiple 
  dateSeparator=" & " 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

اگر خواستید حالت multiple یا range رو فعال کنید ، میتونید از پلاگین DatePanel هم استفاده کنید تا لیست تاریخ هارو هم داشته باشید.

برای مشاهده لیست تاریخ ها باید پلاگین DatePanel رو import کنید:

import DatePicker from "react-multi-date-picker"
import DatePanel from "react-multi-date-picker/plugins/date_panel"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
  multiple
  plugins={[
   <DatePanel position="left" />
  ]}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

در این مثال ، تاریخ هایی با type های مختلف به عنوان مقدار اولیه در نظر گرفته شده و با استفاده از ویژگی sort مرتب شده اند.

import DatePicker from "react-multi-date-picker"
import DatePanel from "react-multi-date-picker/plugins/date_panel"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const [dates, setDates] = useState([
  new DateObject({ calendar: persian, date: new Date() }),
  new DateObject({ calendar: persian, year: 1399, month: 9, day: 8 }),
  new DateObject({ calendar: persian, date: "13 Shahrivar 1399", format: "DD MMMM YYYY" }),
  new DateObject({ calendar: persian, date: 1597994736000 }) //زمان یونیکس با احتساب میلی ثانیه (21 آگوست 2020)
])
.
.
.
<DatePicker
  value={dates}
  onChange={setDates}
  format="MMMM DD YYYY"
  sort
  plugins={[
    <DatePanel position="left" />
  ]}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

<DatePicker
  onlyMonthPicker
  multiple
  sort
  plugins={[
    <DatePanel />
  ]}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

<DatePicker
  onlyYearPicker
  multiple
  sort
  plugins={[
    <DatePanel />
  ]}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>