# test-react-jalali-datepicker

> React component that helps you to makes simple Farsi/Jalali/Shamsi date picker. It also has range date picker you can select multiple days in multiple months.

Latest version **0.0.1** (published 2019-02-09) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install test-react-jalali-datepicker
pnpm add test-react-jalali-datepicker
yarn add test-react-jalali-datepicker
bun add test-react-jalali-datepicker
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2019-02-09 |
| First published | 2019-02-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 2.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 301 |
| Author | reza khosroshahi |
| Maintainers | rzkhosroshahi |
| Keywords | datepicker, farsi, jalali, shamsi |

## Links

- npm: https://www.npmjs.com/package/test-react-jalali-datepicker
- Repository: https://github.com/rzkhosroshahi/react-jalali-datepicker
- Homepage: https://github.com/rzkhosroshahi/react-jalali-datepicker#readme
- Issues: https://github.com/rzkhosroshahi/react-jalali-datepicker/issues
- npm.io page: https://npm.io/package/test-react-jalali-datepicker

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^16.6.3
- [react-dom](https://npm.io/package/react-dom.md) ^16.6.3
- [jalali-moment](https://npm.io/package/jalali-moment.md) ^3.3.1
- [react-text-mask](https://npm.io/package/react-text-mask.md) ^5.4.3
- [styled-components](https://npm.io/package/styled-components.md) ^4.1.2

## Recent versions

- 0.0.1 (latest) — 2019-02-09

## README

# React Jalali Date-Picker

[![Build Status](https://travis-ci.org/rzkhosroshahi/react-jalali-datepicker.svg?branch=master)](https://travis-ci.org/rzkhosroshahi/react-jalali-datepicker)
[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)

![alt-text](./help/banner.png)

React component that helps you to makes simple Farsi/Jalali/Shamsi date picker. It also has range date picker you can select multiple days in multiple months.

## Date Picker

| props               | type                                | default                                                                                                                               |
| ------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| value               | timestamp &#124; Date &#124; Moment | Date                                                                                                                                  | Moment | today date |
| weekend             | number[]                            | `[6]`                                                                                                                                 |
| ArrowLeft           | React.ReactType                     | default component                                                                                                                     |
| ArrowLeft           | React.ReactType                     | default component                                                                                                                     |
| ClockIcon           | React.ReactType                     | default component                                                                                                                     |
| DateIcon            | React.ReactType                     | default component                                                                                                                     |
| timePicker          | boolean                             | true.                                                                                                                                 |
| onClickSubmitButton | function                            | null. if you passed this will be something like                                                                                       |
| modalZIndex         | number                              | 9999                                                                                                                                  |
| theme               | object                              | default theme you can see [here](https://github.com/rzkhosroshahi/react-jalali-datepicker/blob/add-something-to-project/src/theme.ts) |

## usage

```jsx
import React from "react";
import { render } from "react-dom";
import { DatePicker } from "react-jalali-datepicker";

render(<DatePicker />, document.getElementById("root"));
```

### onClickSubmitButton

You can access to datePicker value when submit button is clicked.

example:

```javascript
function submitExample({ value }) {
  console.log("value ", value);
}
```

## Range Date Picker

You can make range date picker with this component. In the below table you can see all the props you can pass to this component.

Note that all props are _optional_.

| props               | type                  | default                                                                                                                                                 |
| ------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| start               | string. ex: 1397/5/18 | today date                                                                                                                                              |
| end                 | string. ex: 1397/5/18 | today date                                                                                                                                              |
| weekend             | number[]              | `[6]`                                                                                                                                                   |
| ArrowLeft           | React.ReactType       | default component                                                                                                                                       |
| ArrowRight          | React.ReactType       | default component                                                                                                                                       |
| isRenderingButtons  | boolean               | true. if it is false rangeDatePicker doesnt show submit and cancel buttons                                                                              |
| onClickSubmitButton | function              | null. if you passed this will be something like [this](https://github.com/rzkhosroshahi/react-jalali-datepicker/tree/submit-button#onClickSubmitButton) |
| modalZIndex         | number                | 9999                                                                                                                                                    |
| theme               | object                | default theme you can see [here](https://github.com/rzkhosroshahi/react-jalali-datepicker/blob/add-something-to-project/src/theme.ts)                   |

## usage

```jsx
import React from "react";
import { render } from "react-dom";
import { RangeDatePicker } from "react-jalali-datepicker";

render(<RangeDatePicker />, document.getElementById("root"));
```

### onClickSubmitButton

You can access to start and end date when submit button is clicked.

example:

```javascript
function submitExample({ start, end }) {
  console.log("start ", start);
  console.log("end ", end);
}
```

## ToDo

- write DatePicker
- add TimePicker

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore -->
| [<img src="https://avatars1.githubusercontent.com/u/11410506?v=4" width="100px;"/><br /><sub><b>Reza Khosroshahi</b></sub>](https://reza.blue)<br />[💻](https://github.com/rzkhosroshahi/react-jalali-datepicker/commits?author=rzkhosroshahi "Code") [📖](https://github.com/rzkhosroshahi/react-jalali-datepicker/commits?author=rzkhosroshahi "Documentation") [💡](#example-rzkhosroshahi "Examples") [🤔](#ideas-rzkhosroshahi "Ideas, Planning, & Feedback") [⚠️](https://github.com/rzkhosroshahi/react-jalali-datepicker/commits?author=rzkhosroshahi "Tests") | [<img src="https://avatars2.githubusercontent.com/u/15178117?v=4" width="100px;"/><br /><sub><b>saeedjalali</b></sub>](http://saeedjalali.ir)<br />[💬](#question-saeedjalali1 "Answering Questions") [🐛](https://github.com/rzkhosroshahi/react-jalali-datepicker/issues?q=author%3Asaeedjalali1 "Bug reports") [💻](https://github.com/rzkhosroshahi/react-jalali-datepicker/commits?author=saeedjalali1 "Code") [🤔](#ideas-saeedjalali1 "Ideas, Planning, & Feedback") [👀](#review-saeedjalali1 "Reviewed Pull Requests") [📢](#talk-saeedjalali1 "Talks") |
| :---: | :---: |

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

---
_Source: https://npm.io/package/test-react-jalali-datepicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
