دیت پیکر چند منظوره ری اکت

پراپ ها

پراپ	حالت	پیش فرض
position	String	"right"
disabled	Boolean	false
calendars	Array	["gregorian", "persian", "arabic", "indian"]
locales	Array	["en", "fa", "ar", "hi"]
modes	Array	["single", "multiple", "range"]
others	Array	["onlyMonthPicker", "onlyYearPicker"]
defaultActive	string	""
disabledList	Array	[]
defaultFormat	Object	{}
names	Object	`{ gregorian: "GE", persian: "PE", arabic: "AR", indian: "IN", en: "EN", fa: "FA", ar: "AR", hi: "HI", single: "SI", multiple: "MU", range: "RA", disable: "DI", onlyMonthPicker: "OM", onlyYearPicker: "OY", }`
titles	Object	`{ calendar: "Calendar", locale: "Locale", mode: "Mode", otherPickers: "Other Pickers", gregorian: "Gregorian", persian: "Persian", arabic: "Arabic", indian: "Indian", en: "English", fa: "Farsi", ar: "Arabic", hi: "Hindi", single: "Single", multiple: "Multiple", range: "Range", disable: "Disable", onlyMonthPicker: "Only Month Picker", onlyYearPicker: "Only Year Picker", }`

پلاگین تنظیمات در پایین تقویم

import React, { useState } from "react"
import DatePicker from "react-multi-date-picker"
import Settings from "react-multi-date-picker/plugins/settings"
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 [props, setProps] = useState({
  calendar: "persian",
  locale: "fa",
  calendarPosition: "bottom-right"
})
.
.
.
<DatePicker
  {...props}
  onPropsChange={setProps}
  plugins={[
    <Settings
      position="bottom"
      defaultActive="mode"
    />,
    <DatePanel 
      disabled={!props.multiple && !props.range} 
      position={["fa", "ar"].includes(props.locale?.name?.split?.("_")?.[1]) ? "left" : "right"}
    />
  ]}
/>

شخصی سازی پلاگین تنظیمات

import React, { useState } from "react"
import DatePicker from "react-multi-date-picker"
import Settings from "react-multi-date-picker/plugins/settings"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const [props, setProps] = useState({
  calendar: "persian",
  locale: "fa",
  calendarPosition: "bottom-right",
  multiple: true
})
.
.
.
<DatePicker
  {...props}
  onPropsChange={setProps}
  plugins={[
    <Settings
      position="left"
      calendars={["gregorian", "persian"]}
      locales={["en", "fa"]}
      modes={["multiple", "range"]}
      disabledList={["other"]}
    />
  ]}
/>

انتخابگر های دیگر

import React, { useState } from "react"
import DatePicker from "react-multi-date-picker"
import Settings from "react-multi-date-picker/plugins/settings"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const initialProps = { 
  value: new Date(), 
  format: "MM-DD-YYYY", 
  calendar: "persian",
  locale: "fa",
  calendarPosition:"bottom-right"
}

const [props, setProps] = useState(initialProps)
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
  {...props}
  onPropsChange={setProps}
  plugins={[
    <Settings
      position="bottom"
      disabledList={["calendar", "locale", "mode"]}
      defaultActive="others"
      defaultFormat={{
        single: "MM-DD-YYYY",
        onlyMonthPicker: "MMMM YYYY",
        onlyYearPicker: "YYYY",
      }}
    />
  ]}
/>