توضیحات
این پلاگین به صورت اختصاصی برای انتخابگر دامنه توسعه داده شده و در حالت های دیگر درست کار نمیکند.
پراپ ها
پراپ | حالت | پیش فرض |
---|---|---|
position | String | "right" |
disabled | Boolean | false |
format | String | Farsi & Arabic locale : "DD MMMM" English & Indian locale : "MMMM DD" |
names | Object | English locale
Farsi locale
|
فوتر انتخابگر دامنه
import React, { useState } from "react";
import DatePicker, { DateObject } from "react-multi-date-picker";
import Footer from "react-multi-date-picker/plugins/range_picker_footer";
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const [value, setValue] = useState([
new DateObject({
calendar: persian,
locale: persian_fa
}).setDay(15),
new DateObject({
calendar: persian,
locale: persian_fa
}).add(1, "month").setDay(15),
]);
.
.
.
<DatePicker
value={value}
onChange={setValue}
range
numberOfMonths={2}
plugins={[
<Footer position="bottom" />
]}
calendar={persian}
locale={persian_fa}
calendarPosition="bottom-right"
/>
شخصی سازی نام ها
import React from "react";
import { Calendar } from "react-multi-date-picker";
import Footer from "react-multi-date-picker/plugins/range_picker_footer";
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<Calendar
range
numberOfMonths={2}
plugins={[
<Footer
position="bottom"
format="dddd DD MMMM"
names={{
selectedDates: "اطلاعات پرواز",
from: "تاریخ رفت",
to: "تاریخ برگشت",
selectDate: "انتخاب نشده",
close: "بستن",
separator: "،",
}}
/>,
]}
calendar={persian}
locale={persian_fa}
calendarPosition="bottom-right"
/>