Version 1.1.0

Background with on click close event added. preSelect for start date of range pickers added.
A-Kasaaian · Apr 22, 2019 · 1409c73 · 1409c73
1 parent 1622ca1
commit 1409c73
Show file tree

Hide file tree

Showing 28 changed files with 8,174 additions and 6,555 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,51 +1,47 @@
 {
-    "parser": "babel-eslint",
-    "env": {
-        "browser": true,
-        "node": true,
-        "es6": true
-    },
-    "ecmaFeatures": {
-        "modules": true
-    },
-    "rules": {
-        "no-bitwise": 2,
-        "no-else-return": 2,
-        "no-eq-null": 2,
-        "no-extra-parens": 0,
-        "no-floating-decimal": 2,
-        "no-inner-declarations": [2, "both"],
-        "no-lonely-if": 2,
-        "no-multiple-empty-lines": [2, {"max": 3}],
-        "no-self-compare": 2,
-        "no-underscore-dangle": 0,
-        "no-use-before-define": 0,
-        "no-unused-expressions": 0,
-        "no-void": 2,
-        "brace-style": [2, "1tbs"],
-        "camelcase": [1, {"properties": "never"}],
-        "consistent-return": 0,
-        "comma-style": [2, "last"],
-        "complexity": [1, 12],
-        "func-names": 0,
-        "guard-for-in": 2,
-        "indent": [2, 4],
-        "max-len": [0, 120, 4],
-        "new-cap": [2, {"newIsCap": true, "capIsNew": false}],
-        "quotes": [2, "single"],
-        "keyword-spacing": [2, {"before": true, "after": true}],
-        "space-before-blocks": [2, "always"],
-        "array-bracket-spacing": [2, "never"],
-        "space-in-parens": [2, "never"],
-        "strict": [0],
-        "valid-jsdoc": 2,
-        "wrap-iife": [2, "any"],
-        "yoda": [1, "never"]
-    },
-    "plugins": [
-        "react"
-    ],
-    "globals": {
-
-    }
-}
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "ecmaFeatures": {
+    "modules": true
+  },
+  "rules": {
+    "no-bitwise": 2,
+    "no-else-return": 2,
+    "no-eq-null": 2,
+    "no-extra-parens": 0,
+    "no-floating-decimal": 2,
+    "no-inner-declarations": [2, "both"],
+    "no-lonely-if": 2,
+    "no-multiple-empty-lines": [2, { "max": 3 }],
+    "no-self-compare": 2,
+    "no-underscore-dangle": 0,
+    "no-use-before-define": 0,
+    "no-unused-expressions": 0,
+    "no-void": 2,
+    "brace-style": [2, "1tbs"],
+    "camelcase": [1, { "properties": "never" }],
+    "consistent-return": 0,
+    "comma-style": [2, "last"],
+    "complexity": [1, 12],
+    "func-names": 0,
+    "guard-for-in": 2,
+    "indent": [2, 2],
+    "max-len": [0, 120, 4],
+    "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
+    "quotes": [2, "double"],
+    "keyword-spacing": [2, { "before": true, "after": true }],
+    "space-before-blocks": [2, "always"],
+    "array-bracket-spacing": [2, "never"],
+    "space-in-parens": [2, "never"],
+    "strict": [0],
+    "valid-jsdoc": 2,
+    "wrap-iife": [2, "any"],
+    "yoda": [1, "never"]
+  },
+  "plugins": ["react"],
+  "globals": {}
+}
diff --git a/README.md b/README.md
@@ -1,5 +1,128 @@
-# Date Time Picker for jalali calender.
+# Advance React Date and Time Picker for jalaali (persian, shamsi) calender
 
+It contains 3 types of jalaali (persian) date pickers, which are range (from, to) date and time pickerو range date picker, date picker and date and time picker.
+
+<p dir="rtl">
+این ماژول شامل ۴ نوع مختلف از باکس انتخاب تاریخ و زمان جلالی (شمسی) است. انواع باکس های انتخاب تاریخ و زمان (پیاده سازی شده تا کنون) عبارتند از: بازه تاریخ و زمان (از، تا)، بازه تاریخ (از، تا)، انتخاب تاریخ و انتخاب تاریخ زمان.</p>
+
+This module is written using  [moment-jalali](https://github.com/jalaali/moment-jalaali), which is relied on [momentjs](http://momentjs.com/).
+
+## Instalation
+
+Use `npm i react-advance-jalaali-datepicker` in order to install the module. Yes that's it. There is no extera font or css file to include. It's designed simple to prevent any issue during customization. Customize it in any way you want.
+
+## Usage
+In order to use this module, import the packege into your react component and use the module as below. The belowing example is the code  that is used in the sample usage video below.
+
+![demo of react advance jalaali (persian) datepicker](https://raw.githubusercontent.com/A-Kasaaian/react-advance-jalaali-datepicker/master//demo.gif)
+
+```javascript
+	import React from "react";
+	import {DatePicker, DateTimePicker, DateRangePicker, DateTimeRangePicker} from "react-advance-jalaali-datepicker";
+    export class Home extends React.component {
+		change(unix, formatted){
+		    console.log(unix) // returns timestamp of the selected value, for example.
+            console.log(formatted) // returns the selected value in the format you've entered, forexample, "تاریخ: 1396/02/24 ساعت: 18:30".
+		}
+		DatePickerInput(props) {
+			return <input className="popo" {...props} ></input>;
+		}
+		render() {
+		    return (
+		      <div className="datePicker">
+				<DatePicker
+					inputComponent={this.DatePickerInput}
+					placeholder="انتخاب تاریخ"
+					format="jYYYY/jMM/jDD"
+					onChange={this.change}
+					id="datePicker"
+					preSelected="1396/05/15"
+					/>
+				<DateTimePicker
+					placeholder="انتخاب تاریخ و ساعت"
+					format="تاریخ: jYYYY/jMM/jDD ساعت: HH:mm"
+					id="dateTimePicker"
+					onChange={this.changeTimeDate}
+					preSelected="تاریخ: 1396/02/24 ساعت: 18:30"
+					/>
+				<DateRangePicker
+					placeholderStart="تاریخ شروع"
+					placeholderEnd="تاریخ پایان"
+					format="jYYYY/jMM/jDD"
+					onChangeStart={this.change}
+					onChangeEnd={this.changeTimeDate}
+					idStart="rangePickerStart"
+					idEnd="rangePickerEnd"
+					/>
+				<DateTimeRangePicker
+					placeholderStart="تاریخ و ساعت شروع"
+					placeholderEnd="تاریخ و ساعت پایان"
+					format="تاریخ: jYYYY/jMM/jDD ساعت: HH:mm"
+					onChangeStart={this.change}
+					onChangeEnd={this.changeTimeDate}
+					idStart="rangePickerStart"
+					idEnd="rangePickerEnd" />
+		      </div>
+			)
+		}
+	}
+```
+#### component types:
+
+| name | Description |
+| ---- | ----------- |
+| **DatePicker** | shows a box allowing you pick just a _date_ |
+| **DateTimePicker** | shows a box allowing you pick just a _date_ and _time_ |
+| **DateRangePicker** | shows a box twice, allowing you pick two _dates_. The first box allows you to pick the beginnig _date_ and second one lets you pick end _date_ |
+| **DateTimeRangePicker** | shows a box twice, allowing you pick two _dates_ and _time_. The first box allows you to pick the beginnig _date_ and _time_ and second one lets you pick end _date_ and _time_ |
+
+
+## Options
+
+Each type has its' own options.
+
+**"DatePicker" and "DateTimePicker":**
+
+| Name          | type  | Description  |
+| ------------- |-------------|-------------|
+| placeholder   | string | Placeholder of the datepicker input |
+| format      | string | Format of showing date in the input and styled output. Accepts moment-jalali formats (required) |
+| onChange | function | On change call of the input (required) |
+| id | string | Adds id attribute to the input elment |
+| preSelected | string | Previously selected date, it should be formatted exactly the same as the format option | 
+| customClass | string | To add "className" to the datepicker | 
+| inputTextAlign | string | Texte align of the date input. default "right" | 
+| containerClass | string | To add "className" to the datepicker input container | 
+| monthTitleEnable | boolean | To add a title before month controller row |
+| inputComponent | JSX element | To add customized input field to your datepicker |
+| cancelOnBackgroundClick | boolean | To add background, which closes the datepicker on click event. It's customizable wi class name "JDBackground"  |
+
+**DateRangePicker:**
+
+| Name          | type  | Description  |
+| ------------- |-------------|-------------|
+| placeholderStart, placeholderEnd   | string | Placeholder of the datepickers inputs |
+| format      | string | Format of showing date in the input. Applies on both inputs. Accepts moment-jalali formats (required) |
+| onChangeStart, onChangeEnd | function | On change call of inputs |
+| idStart, idEnd | string | Add id attributes to the input elments |
+| customClassStart, customClassEnd | string | To add class name to start and end dattepickers | 
+| inputTextAlign | string | Texte align of the date input. default "right" | 
+| containerClass | string | To add "className" to the datepicker input container |
+| monthTitleEnable | boolean | to add a title before month controller row |
+| inputComponent | JSX element | To add customized input field to your datepicker |
+| preSelectedStart | string | Previously selected date, it should be formatted exactly the same as the format option |
+| cancelOnBackgroundClick | boolean | To add background, which closes the datepicker on click event. It's customizable wi class name "JDBackground"  |
+
+### Highlight specific date
+
+Add format of the date. Add preSelected date with the mentioned format. The day will get "selected" calss.
+Today is containing "current-date" calss name.
+
+## More
+
+More features will be provided.
+
+I'll be glad to help if you faced any issue. Please, report issues [here](https://github.com/A-Kasaaian/react-advance-jalaali-datepicker/issues/new).
 
 ## License
 

diff --git a/demo.gif b/demo.gif