# radar-react-multi-date-picker

> a simple React datepicker component for work with gregorian, persian, arabic and indian calendars

Latest version **2.0.3** (published 2020-12-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install radar-react-multi-date-picker
pnpm add radar-react-multi-date-picker
yarn add radar-react-multi-date-picker
bun add radar-react-multi-date-picker
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2020-12-22 |
| First published | 2020-12-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 177.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 997 |
| Author | Shahab Yazdi |
| Maintainers | itisradar |
| Keywords | react, multi, date, datepicker, gregorian, calendar, persian, indian, farsi, arabic, english, hindi, locals, datetime, gregorian-calendar, persian-calendar, islamic-calendar, arabic-calendar, indian-calendar, format-date |

## Links

- npm: https://www.npmjs.com/package/radar-react-multi-date-picker
- Repository: https://github.com/shahabyazdi/react-multi-date-picker
- Homepage: https://shahabyazdi.github.io/react-multi-date-picker/
- Issues: https://github.com/shahabyazdi/react-multi-date-picker/issues
- npm.io page: https://npm.io/package/radar-react-multi-date-picker

## Dependencies (1)

- [react-date-object](https://npm.io/package/react-date-object.md) ^1.1.6

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.3 (latest) — 2020-12-22
- 2.0.2 — 2020-12-22
- 2.0.1 — 2020-12-22
- 2.0.0 — 2020-12-22

## README

# DatePicker

![DatePicker](/screenshot/screenshot.jpg?raw=true)

## Installation

```code
npm install --save react-multi-date-picker
```

## Usage

```javascript
import React from "react";
import DatePicker from "react-multi-date-picker";

export default function Example() {
  return <DatePicker />;
}
```

## Browser (none react-app)

```html
<!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@1.1.7/dist/date-object.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-multi-date-picker@1.8.5/build/date-picker.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-multi-date-picker@1.8.5/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](https://shahabyazdi.github.io/react-multi-date-picker/)

## Availble props

| Name                 |                                             Type                                              |                Default                | Availability (DatePicker/ Calendar) |
| -------------------- | :-------------------------------------------------------------------------------------------: | :-----------------------------------: | ----------------------------------- |
| value                | Date, [DateObject](https://github.com/shahabyazdi/react-date-object), 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                          |

## Calendars and Locals

<table>
  <thead>
    <tr>
      <th>Calendars</th>
      <th>Locals</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>gregorian (default)</td>
      <td>en (default)</td>
    </tr>
    <tr>
      <td>persian</td>
      <td>fa</td>
    </tr>
    <tr>
      <td>arabic</td>
      <td>ar</td>
    </tr>
    <tr>
      <td>indian</td>
      <td>hi</td>
    </tr>
  </tbody>
</table>

## Types

<table>
  <thead>
    <tr>
      <th colSpan="5">DatePicker Types</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>input (default)</td>
      <td>input-icon</td>
      <td>icon</td>
      <td>button</td>
      <td>custom</td>
    </tr>
  </tbody>
</table>

---
_Source: https://npm.io/package/radar-react-multi-date-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._