Usage

Plugins Prop accepts an array of plugins, which the following two properties can be applied on each of them which has entered as React Component.

PropDefault
position"right"
disabledfalse

This is the general way to add an imported plugin component to Datepicker:

import React from "react"
import DatePicker from "react-multi-date-picker"
import MyFavoritePlugin from "react-multi-date-picker/plugins/my_favorite_plugin"
import myFavoriteFunctionalPlugin from "react-multi-date-picker/plugins/my_favorite_functional_plugin"

export default function Example() {
  return (
    <DatePicker
      plugins={[
        <MyFavoritePlugin />, myFavoriteFunctionalPlugin()
      ]}
    />
  )
}

Availble Plugins

Plugin NamePathBrowser PathType
DatePickerHeaderplugins/date_picker_headerbuild/date_picker_header.browserReact Component
DatePanelplugins/date_panelbuild/date_panel.browserReact Component
colorsplugins/colorsbuild/colors.browserFunction
Settingsplugins/settingsbuild/settings.browserReact Component
weekendsplugins/highlight_weekendsbuild/highlight_weekends.browserFunction
Toolbarplugins/toolbarbuild/toolbar.browserReact Component
TimePickerplugins/time_pickerbuild/time_picker.browserReact Component
AnalogTimePickerplugins/analog_time_pickerbuild/analog_time_picker.browserReact Component
RangePickerFooterplugins/range_picker_footerbuild/range_picker_footer.browserReact Component

Positions

  • top
  • bottom
  • left
  • right