React Multi Date Picker

Props

Prop	Type	Default
position	String	"bottom"
disabled	Boolean	false
colors	Array	["blue", "red", "green", "yellow"]
defaultColor	String	first item of colors

Default Color

import React, { useState } from "react"
import DatePicker from "react-multi-date-picker"
import colors from "react-multi-date-picker/plugins/colors"
.
.
.
const [props, setProps] = useState({
  multiple: true,
  plugins: [colors({ defaultColor: "green" })],
});
.
.
.
<DatePicker
  {...props}
  onPropsChange={setProps}
/>

With DatePanel

import React, { useState } from "react"
import DatePicker, { DateObject } from "react-multi-date-picker"
import colors from "react-multi-date-picker/plugins/colors"
import DatePanel from "react-multi-date-picker/plugins/date_panel";
.
.
.
const yesterday = new DateObject().subtract(1, "day");
const today = new DateObject();
const tomorrow = new DateObject().add(1, "day");

yesterday.color = "red";
today.color = "blue";
tomorrow.color = "red";

const [props, setProps] = useState({
  multiple: true,
  value: [yesterday, today, tomorrow],
  plugins: [
    colors({ colors: ["blue", "red"] }),
    <DatePanel sort="color" />,
  ],
});
.
.
.
<DatePicker 
  {...props} 
  onPropsChange={setProps} 
/>