Props
Prop | Type | Default |
---|---|---|
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 |
|
titles | Object |
|
Settings Bottom
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"
.
.
.
const [props, setProps] = useState({})
.
.
.
<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"}
/>
]}
/>
Custom Settings
import React, { useState } from "react"
import DatePicker from "react-multi-date-picker"
import Settings from "react-multi-date-picker/plugins/settings"
.
.
.
const [props, setProps] = useState({ multiple: true })
.
.
.
<DatePicker
{...props}
onPropsChange={setProps}
plugins={[
<Settings
position="left"
calendars={["gregorian", "persian"]}
locales={["en", "fa"]}
modes={["multiple", "range"]}
disabledList={["other"]}
/>
]}
/>
Other Pickers
import React, { useState } from "react"
import DatePicker from "react-multi-date-picker"
import Settings from "react-multi-date-picker/plugins/settings"
.
.
.
const initialProps = {
value: new Date(),
format: "MM-DD-YYYY",
}
const [props, setProps] = useState(initialProps)
.
.
.
<DatePicker
{...props}
onPropsChange={setProps}
plugins={[
<Settings
position="bottom"
disabledList={["calendar", "locale", "mode"]}
defaultActive="others"
defaultFormat={{
single: "MM-DD-YYYY",
onlyMonthPicker: "MMMM YYYY",
onlyYearPicker: "YYYY",
}}
/>
]}
/>