پراپ ها

پراپحالتپیش فرض
positionString"right"
disabledBooleanfalse
calendarsArray["gregorian", "persian", "arabic", "indian"]
localesArray["en", "fa", "ar", "hi"]
modesArray["single", "multiple", "range"]
othersArray["onlyMonthPicker", "onlyYearPicker"]
defaultActivestring""
disabledListArray[]
defaultFormatObject{}
namesObject
{
  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",
}
titlesObject
{
  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",
      }}
    />
  ]}
/>