پراپ ها

پراپحالتپیش فرض
positionString"right"
disabledBooleanfalse
sizeString"big"
calendarObjectDefault DatePicker Calendar
localeObjectDefault DatePicker Locale

اندازه ها

  • big
  • medium
  • small

سربرگ سمت راست

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"
/>