محدود کردن دریافت زمان

همانند مقدار اولیه، مقدار حداقل یا حداکثر هم میتونه از جنس Date , DateObject , Number و یا String باشه. فقط باید این نکته رو در نظر بگیرید که Date تاریخ میلادی رو تولید میکنه و اگه از دیت پیکر با تقویم شمسی استفاده میکنید، بهتره با دیت آبجکت تاریخ شمسی رو تولید کنید.

برای محدود کردن دریافت زمان هم باید مقدار حداقل رو داخل پراپرتی minDate و مقدار حداکثر رو داخل پراپرتی maxDate قرار بدید.

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const [date, setDate] = useState(new DateObject({ calendar: persian }).set("date", 10))
.
.
.
<DatePicker
  value={date}
  onChange={setDate}
  minDate={new DateObject({ calendar: persian }).set("date", 5)}
  maxDate={new DateObject({ calendar: persian }).set("date", 15)}
  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 [date, setDate] = useState("1399/10/12")
.
.
.
<DatePicker
  value={date}
  onChange={setDate}
  minDate="1399/9/18"
  maxDate="1399/11/14"
  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 }),
  new DateObject({ calendar: persian }).add(1, "day")
])
.
.
.
<DatePicker
  value={values}
  onChange={setValues}
  range
  minDate={new DateObject({ calendar: persian }).subtract(2, "days")}
  maxDate={new DateObject({ calendar: persian }).add(3, "days")}
  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
  minDate={new DateObject({ calendar: persian }).set("day", 5)}
  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
  maxDate={new DateObject({ calendar: persian }).set("day", 15)}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>