React Multi Date Picker

Props

Prop	Type	Default
position	String	"right"
disabled	Boolean	false
size	String	"big"
calendar	Object	Default DatePicker Calendar
locale	Object	Default DatePicker Locale

Sizes

big
medium
small

Header Right

import DatePicker from "react-multi-date-picker"
import DatePickerHeader from "react-multi-date-picker/plugins/date_picker_header"
.
.
.
<DatePicker
  plugins={[
    <DatePickerHeader />
  ]}
/>

Header Left

import DatePicker from "react-multi-date-picker"
import DatePickerHeader from "react-multi-date-picker/plugins/date_picker_header"
.
.
.
<DatePicker
  plugins={[
    <DatePickerHeader position="left" />
  ]}
/>

English Calendar with Indian Header

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)
.
.
.
<DatePicker
  plugins={[
    <DatePickerHeader 
      locale={gregorian_hi}
      size="medium" 
    />,
  ]}
  calendarPosition="bottom-left"
/>

Styling Header

import DatePicker from "react-multi-date-picker"
import DatePickerHeader from "react-multi-date-picker/plugins/date_picker_header"
.
.
.
<DatePicker
  plugins={[
    <DatePickerHeader 
      position="top" 
      size="small" 
      style={{ backgroundColor: "steelblue" }} 
    />
  ]}
/>