Props
Prop | Type | Default |
---|---|---|
position | String | "right" |
disabled | Boolean | false |
size | String | "big" |
calendar | Object | Default DatePicker Calendar |
locale | Object | Default DatePicker Locale |
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" }}
/>
]}
/>