npm install --save react-multi-date-picker
import React from "react";
import DatePicker from "react-multi-date-picker";
export default function Example() {
return <DatePicker />;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React Multi Date Picker</title>
</head>
<body>
<span>Calendar Example :</span>
<div id="calendar"></div>
<span>DatePicker Example :</span>
<div id="datePicker"></div>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/date-object@latest/dist/date-object.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-multi-date-picker@latest/build/date-picker.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-multi-date-picker@latest/build/calendar.min.js"></script>
<script type="text/babel">
ReactDOM.render(<Calendar />, document.getElementById("calendar"));
ReactDOM.render(<DatePicker />, document.getElementById("datePicker"));
</script>
</body>
</html>https://shahabyazdi.github.io/react-multi-date-picker
| Name | Type | Default | Availability (DatePicker/ Calendar) |
|---|---|---|---|
| value | Date, DateObject, String, Number or Array | new Date() | both |
| multiple | Boolean | false (true if value is Array) | both |
| range | Boolean | false | both |
| timePicker | Boolean | false | both |
| onlyTimePicker | Boolean | false | both |
| onlyMonthPicker | Boolean | false | both |
| onlyYearPicker | Boolean | false | both |
| mustShowDates | Boolean | false (true in multiple & range mode) | both |
| format | String | YYYY/MM/DD | both |
| formattingIgnoreList | Array | undefined | both |
| local | String | en | both |
| calendar | String | gregorian | both |
| mapDays | Function | undefined | both |
| onChange | Function | undefined | both |
| className | String | "" | both |
| weekDays | Array | undefined | both |
| months | Array | undefined | both |
| showOtherDays | Boolean | true | both |
| minDate | Date, DateObject, String or Number | undefined | both |
| maxDate | Date, DateObject, String or Number | undefined | both |
| disableYearPicker | Boolean | false | both |
| disableMonthPicker | Boolean | false | both |
| eachDaysInRange | Boolean | false | both |
| zIndex | Number | 100 | both |
| animation | Boolean | false | DatePicker |
| inputClass | String | "" | DatePicker |
| name | String | undefined | DatePicker |
| id | String | undefined | DatePicker |
| title | String | undefined | DatePicker |
| placeholder | String | undefined | DatePicker |
| style | Object | {} | DatePicker |
| type | String | input | DatePicker |
| render | React.Component or Function | undefined | DatePicker |
| disabled | Boolean | false | DatePicker |
| inputMode | String | undefined | DatePicker |
| scrollSensitive | Boolean | true | DatePicker |
| hideOnScroll | Boolean | false | DatePicker |
| calendarPosition | String | auto | DatePicker |
| containerStyle | Object | undefined | DatePicker |
| containerClassName | String | undefined | DatePicker |
| editable | Boolean | true | DatePicker |
| onlyShowInRangeDates | Boolean | true | DatePicker |
| Calendars | Locals |
|---|---|
| gregorian (default) | en (default) |
| persian | fa |
| arabic | ar |
| indian | hi |
| DatePicker Types | ||||
|---|---|---|---|---|
| input (default) | input-icon | icon | button | custom |