radar-react-multi-date-picker
v2.0.3
Published
a simple React datepicker component for work with gregorian, persian, arabic and indian calendars
Downloads
16
Maintainers
itisradarReadme
DatePicker
Installation
npm install --save react-multi-date-pickerUsage
import React from "react";
import DatePicker from "react-multi-date-picker";
export default function Example() {
return <DatePicker />;
}Browser (none react-app)
<!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/[email protected]/dist/date-object.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/date-picker.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/calendar.min.js"></script>
<script type="text/babel">
ReactDOM.render(<Calendar />, document.getElementById("calendar"));
ReactDOM.render(<DatePicker />, document.getElementById("datePicker"));
</script>
</body>
</html>Demo
https://shahabyazdi.github.io/react-multi-date-picker
Availble props
| 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 | "" | DatePicker | | style | Object | {} | DatePicker | | type | String | input | DatePicker | | render | React.Component or Function | undefined | DatePicker | | disabled | Boolean | false | DatePicker | | placeholder | String | "" | 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 |