پراپ ها
پراپ | حالت | پیش فرض |
---|---|---|
position | String | "right" |
disabled | Boolean | false |
size | String | "big" |
calendar | Object | Default DatePicker Calendar |
locale | Object | Default DatePicker Locale |
سربرگ سمت راست
import DatePicker from "react-multi-date-picker"
import DatePickerHeader from "react-multi-date-picker/plugins/date_picker_header"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
plugins={[
<DatePickerHeader />
]}
calendar={persian}
locale={persian_fa}
calendarPosition="bottom-right"
/>
سربرگ سمت چپ
import DatePicker from "react-multi-date-picker"
import DatePickerHeader from "react-multi-date-picker/plugins/date_picker_header"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
plugins={[
<DatePickerHeader position="left" />
]}
calendar={persian}
locale={persian_fa}
calendarPosition="bottom-right"
/>
تقویم میلادی با سربرگ هندی
import DatePicker from "react-multi-date-picker"
import DatePickerHeader from "react-multi-date-picker/plugins/date_picker_header"
import gregorian_hi from "react-date-object/locales/gregorian_hi" //(gregorian calendar, hindi locale)
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
plugins={[
<DatePickerHeader
locale={gregorian_hi}
size="medium"
/>,
]}
calendarPosition="bottom-right"
/>
شخصی سازی سربرگ
import DatePicker from "react-multi-date-picker"
import DatePickerHeader from "react-multi-date-picker/plugins/date_picker_header"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
plugins={[
<DatePickerHeader
position="top"
size="small"
style={{ backgroundColor: "steelblue" }}
/>
]}
calendar={persian}
locale={persian_fa}
calendarPosition="bottom-right"
/>