محدود کردن دریافت زمان
همانند مقدار اولیه، مقدار حداقل یا حداکثر هم میتونه از جنس 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"
/>