# react-jalaali-datepicker

> minimal jalaali (persian) datepicker for react

Latest version **1.1.2** (published 2018-08-15) · AGPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install react-jalaali-datepicker
pnpm add react-jalaali-datepicker
yarn add react-jalaali-datepicker
bun add react-jalaali-datepicker
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2018-08-15 |
| First published | 2018-07-27 |
| Weekly downloads | 0 |
| License | AGPL-3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 36.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | farhad sharifi |
| Maintainers | faraadi |
| Keywords | react, datepicker, react-datepicker, jalaali, persian, persian-datepicker, jalaali-datepicker, react-datepicker |

## Links

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

## Dependencies (1)

- [moment-jalaali](https://npm.io/package/moment-jalaali.md) ^0.7.4

## 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

- 1.1.2 (latest) — 2018-08-15
- 1.1.0 — 2018-08-14
- 1.0.3 — 2018-07-27
- 1.0.2 — 2018-07-27
- 1.0.1 — 2018-07-27
- 1.0.0 — 2018-07-27

## README

# minimal Jalaali (Persian) Datepicker for React.

Currently only support single datepicker (not rangepicker or timepicker). those will be added soon!</br>
Project is improved version of [react-advance-jalaali-datepicker](https://github.com/A-Kasaaian/react-advance-jalaali-datepicker), with new methods, props, events and some custom css.</br>
Both use [moment-jalaali](https://github.com/jalaali/moment-jalaali) for jalaali calendar system.
## Table of Contents

- [installation](#installation)
- [usage](#usage)
- [events](#events)
- [api](#api)
## Installation
first make sure you have Nodejs and npm installed</br>
```sh
node -v
```
and 
```sh
npm -v
```
then enter following:</br>
```sh
  npm i react-jalaali-datepicker
```
## Usage
this is a simple example of using this module.
```js
//example.js
import React from 'react';
import {Datepicker} from 'react-jalaali-datepicker';
 
export default class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open : false,
      date : "13970510"
    }
  }
  onChange(selectedDate) {
    console.log(selectedDate);
  }
  render() {
    return (
      <Datepicker
      date={this.state.date}
      onChange={this.onChange}
      className="datepicker-wrapper"
      inputClassName="datepicker-input"
      placeholder="Enter new date"
      dir="auto"
      open={this.state.open}
      />
    );
  }
}

```
in your index.js:</br>
```js
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Example from './example';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<Example />, document.getElementById('root'));
registerServiceWorker();

```
try by cloning this [repo](https://github.com/faraadi/react-jalaali-datepicker):
```sh
  git clone https://github.com/faraadi/react-jalaali-datepicker
  cd react-jalaali-datepicker/example
  npm install
  npm start
```
## Events
currently three events is supported: `open`, `close` and `change`</br>
you can provide events handler for these events in two way :</br>
1.using Props</br>
```js
import React from 'react';
import {Datepicker} from 'react-jalaali-datepicker';
export class PropExample extends React.Component {
    openHandler() {
      console.log("it's opened");
      //your code...
    }
    closeHandler() {
      console.log("now is closed");
      //your code...
    }
    changeHandler(date) {
      console.log(`new Date is entered: ${date}`);
      //your code...
    }
    render() {
      return (
        <Datepicker
          onOpen={this.openHandler}
          onClose={this.closeHandler}
          onChange={this.changeHandler}
        />
      );
    }
}
```
2.assigning `ref` and using `on` method</br>
```js
import React from 'react';
import {Datepicker} from 'react-jalaali-datepicker';
export class MethodExample extends React.Component {
    constructor(props) {
        super(props);
        this.datepicker = React.createRef();
    }
    componentDidMount() {
      this.datepicker.current.on("open", function() {
        console.log("opened!");
        // some codes
      });
      this.datepicker.current.on("change", function(date) {
        console.log(date);
        // some codes
      });
      this.datepicker.current.on("close", function() {
        console.log("closed!");
        // some codes
      });
    }
    render() {
      return (
        <Datepicker
          ref={this.datepicker}
        />
      );
    }
}
```
## API
you could use following props and method to interact with datepicker.
> i recommend using props way instead of methods.
 
prop | type | default | description
:--- | :---: | :---: | :---
open | boolean | false | a boolean to indicate whether datepicker is open or close
date | moment-jalaali | current date | date in 'yyyymmdd' format, example : "13970510"
inputValue | any | none | initial input value
onChange | function(arg) | none | event handler that called whenever a date is selected. accept the selected date as argument
onOpen | function() | none | event Handler that called when user opens datepicker
onClose | function() | none | event handler that called when user close datepicker
readOnly | boolean | false | html input readonly prop
format | string | jYYYY-jMM-jDD | date format to display. defualt format is recommended
className | string | none | css class for wrapper
inputClassName | string | none |css class for input
inputId | string | none | css id for input
placeholder | string | none | input placeholder
dir | string | none | input text direction, ltr, rtl or auto


>call these method using `ref`.

method | arg | description
:--- | :---: | :---
getValue | none | return current value of datepicker in the format of : `YYYY/MM/DD`
setValue | `date` : string | set the value of datepicker. `date` argument must be provided without slashes, like `date` prop. example : "13950510"
on | `event` : string, `callBack` : function | defines event handler for specified events. can attach multiple `callBack` for each event.
open | none | opens the datepicker
close | none | closes the datepicker
## More
more feature, such as `range picker` and `time picker` will be provided soon.

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