React Multi Date Picker

Descriptions

This plugin is developed specifically for the Range Picker and does not work properly in other modes.

Props

Prop	Type	Default
position	String	"right"
disabled	Boolean	false
format	String	Farsi & Arabic locale : "DD MMMM" English & Indian locale : "MMMM DD"
names	Object	English locale `{ selectedDates: "Selected Dates:", from: "From:", to: "To:", selectDate: "Select Date", close: "Close", separator: "-", }` Farsi locale `{ selectedDates: "تاریخ انتخابی شما:", from: "از:", to: "تا:", selectDate: "انتخاب کنید", close: "بستن", separator: "-", }`

import React, { useState } from "react";
import DatePicker, { DateObject } from "react-multi-date-picker";
import Footer from "react-multi-date-picker/plugins/range_picker_footer";
.
.
.
const [value, setValue] = useState([
  new DateObject().setDay(15),
  new DateObject().add(1, "month").setDay(15),
]);
.
.
.
<DatePicker
  value={value}
  onChange={setValue}
  range
  numberOfMonths={2}
  plugins={[
    <Footer position="bottom" />
  ]}
/>

Custom Names

import React from "react";
import { Calendar } from "react-multi-date-picker";
import Footer from "react-multi-date-picker/plugins/range_picker_footer";
.
.
.
<Calendar
  range
  numberOfMonths={2}
  plugins={[
    <Footer
      position="bottom"
      format="MMM DD"
      names={{
        selectedDates: "Flight information:",
        from: "Departure date:",
        to: "Return date:",
        selectDate: "select",
        close: "Close",
        separator: ",",
      }}
    />,
  ]}
/>

Descriptions

Props

Default Range Picker Footer

Custom Names