برای استفاده از حالت range هم باید مقدار value تون آرایه باشه . حالا میتونه این آرایه خالی باشه یعنی [] باشه که در این صورت هیچ دامنه ی تاریخی در دیتپیکرتون نشون داده نمیشه تا خود کاربر یکی رو انتخاب کنه، یا میتونید خودتون یک مقدار رو به عنوان مقدار اولیه تعریف کنید. فقط نکته ای که باید در هنگام مشخص کردن مقدار اولیه در نظر بگیریید اینه که در حالت range آرایه شما باید یک یا دو تا تاریخ داشته باشه و اگه از دوتا بیشتر باشه فقط تاریخ اول و آخر موجود در اون آرایه در نظر گرفته میشن.

تعریف کردن مقدار اولیه هم که خیلی سادست ، من اینجا یک ارایه که داخلش دوتا تاریخ هست که اولیش 4 روز قبل و دومیش 4 روز بعد هست رو در آرایه قرار میدم تا ببینید چجوری کار میکنه :

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const [values, setValues] = useState([
  new DateObject({ calendar: persian }).subtract(4, "days"),
  new DateObject({ calendar: persian }).add(4, "days")
])
.
.
.
<DatePicker
  value={values}
  onChange={setValues}
  range
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

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

<DatePicker 
  range 
  dateSeparator=" تا " 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const [values, setValues] = useState([
  new DateObject({ calendar: persian })
])
.
.
.
<Calendar
  value={values}
  onChange={setValues}
  range
  rangeHover
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

همانطور که در مثال موجود در قسمت انتخابگر چندتایی هم اشاره شد ، برای مشاهده لیست تاریخ ها باید پلاگین DatePanel رو import کنید:

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
  range
  plugins={[
    <DatePanel position="left" />
  ]}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

همانطور که در مثال بالا مشاهده می کنید، در حالت range، فقط تاریخ های شروع و پایان در DatePanle نمایش داده می شود.

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

به همین ترتیب ، در onChange نیز فقط تاریخ شروع و پایان داده می شود و اگر می خواهید تاریخ های مابین شروع و پایان را داشته باشید ، می توانید از فانکشن getAllDatesInRange استفاده کنید.

فقط بخاطر داشته باشید که فعال کردن ویژگی eachDaysInRange در دامنه های بزرگی از تاریخ ممکن است باعث کندی رندر ری اکت شود ، بنابراین بهتر است DatePicker خود را با minDate و maxDate محدود کنید.

در مثال زیر ، DatePicker محدود به آغاز و پایان ماه جاری است.

import DatePicker, { DateObject, getAllDatesInRange } 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([])
const [allDates, setAllDates] = useState([])
.
.
.
<div>
  <DatePicker
    range
    calendarPosition="top-left"
    fixMainPosition
    value={dates}
    minDate={new DateObject({ calendar: persian }).toFirstOfMonth()}
    maxDate={new DateObject({ calendar: persian }).toLastOfMonth()}
    onChange={dateObjects => {
      setDates(dateObjects)
      setAllDates(getAllDatesInRange(dateObjects))
    }}
    plugins={[
      <DatePanel eachDaysInRange position="left" />
    ]}
    calendar={persian}
    locale={persian_fa}
    calendarPosition="bottom-right"
  />
  {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>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
  range
  weekPicker
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
  onlyMonthPicker
  range
  plugins={[
    <DatePanel />
  ]}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
  onlyYearPicker
  range
  plugins={[
    <DatePanel />
  ]}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>