حالت Multiple Range راهی برای انتخاب چندین محدوده تاریخ است و کدهای ارائه شده در زیر نحوه انجام آن را با استفاده از هوک useState برای مدیریت محدوده‌های تاریخ انتخاب شده نشان می‌دهند.

مقدار اولیه محدوده تاریخ انتخاب شده با استفاده از مقدار پراپ value به کامپوننت Calendar منتقل می شود، در حالی که تابع onChange برای به روز رسانی محدوده تاریخ انتخابی در هر زمانی که کاربر محدوده جدیدی را انتخاب کند استفاده می شود.

در این مثال، Values با سه محدوده تاریخ انتخاب شده مقداردهی اولیه می شود. هر محدوده به صورت آرایه ای از دو نمونه DateObject نشان داده می شود که تاریخ شروع و پایان محدوده را مشخص می کند. کامپوننت Calendar برای نمایش تقویم و مدیریت ورودی کاربر استفاده می شود.تابع onChange روی setValues تنظیم شده است، که برای به روز رسانی وضعیت values هر زمان که کاربر محدوده تاریخ جدیدی را انتخاب می کند، استفاده می شود. پراپ multiple روی true تنظیم شده است که به کاربر امکان می دهد چندین تاریخ را انتخاب کند. همچنین پراپ range نیز روی true تنظیم شده است، که کاربر را قادر می‌سازد تا محدوده‌ای از تاریخ‌ها را انتخاب کند. به طور خلاصه، حالت Multiple Range برای انتخاب چندین محدوده تاریخ در یک تقویم یا انتخابگر تاریخ مفید است.

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const [values, setValues] = useState([
  [new DateObject().set({ day: 1 }), new DateObject().set({ day: 3 })],
  [new DateObject().set({ day: 6 }), new DateObject().set({ day: 12 })],
  [new DateObject().set({ day: 23 }), new DateObject().set({ day: 27 })],
])
.
.
.
<Calendar
  value={values}
  onChange={setValues}
  multiple
  range
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

مقدار پیش فرض پراپ multipleRangeSeparator برابر است با '،' است

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

ویژگی onlyMonthPicker در انتخابگر تاریخ یا تقویم به کاربران اجازه می‌دهد فقط ماه‌ها را بدون انتخاب روز خاصی انتخاب کنند. هنگامی که پراپ های miltiple و range اضافه می شوند، کاربران می توانند چندین محدوده ماه را انتخاب کنند.

کد ارائه شده نحوه استفاده از کامپوننت DatePicker در React را با props های onlyMonthPicker، multiple و range نشان می دهد.

کامپوننت DatePicker برای نمایش تقویم و مدیریت ورودی کاربر استفاده می شود. پراپ onlyMonthPicker انتخاب کاربر را فقط به ماهها محدود می‌کند، در حالی که پراپ های multiple و range به کاربر امکان می‌دهند چندین محدوده ماه را انتخاب کند.

به طور خلاصه، ویژگی onlyMonthPicker در انتخابگر تاریخ به کاربران اجازه می‌دهد فقط ماه‌ها را بدون انتخاب روز خاصی انتخاب کنند. هنگامی که با پراپ های miltiple و range استفاده می شود، کاربران می توانند چندین محدوده ماه را انتخاب کنند.

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

ویژگی onlyYearPicker در انتخابگر تاریخ یا تقویم به کاربران اجازه می‌دهد تنها سال‌ها را بدون انتخاب روز یا ماه خاص انتخاب کنند. هنگامی که پراپ های multiple و range اضافه می شود، کاربران می توانند چندین محدوده سال را انتخاب کنند.

کد ارائه شده نحوه استفاده از کامپوننت DatePicker در React را با پراپ های multiple، range و onlyYearPicker نشان می دهد.

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