ReactJs simple and reusable Datepicker component with Persian Jalali Calendar Support
ReactJs simple and reusable Datepicker component with Persian Jalali Calendar Support
Venkat Nagaram
ReactJs simple and reusable Datepicker component with Persian Jalali Calendar Support
A simple and reusable Datepicker component for React (with persian jalali calendar support) Demo.
This package uses react-persian-datepicker project under the hood.
Installation
The package can be installed via NPM:
|
1 2 |
npm install react-datepicker2 --save |
At this point you can import react-datepicker2 and its styles in your application as follows:
|
1 |
<span class="pl-k">import</span> <span class="pl-v">DatePicker</span> <span class="pl-k">from</span> <span class="pl-s">'react-datepicker2'</span><span class="pl-kos">;</span> |
Below is a simple example on how to use the Datepicker in a React view.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span> <span class="pl-k">import</span> <span class="pl-s1">moment</span> <span class="pl-k">from</span> <span class="pl-s">'moment-jalaali'</span> <span class="pl-k">import</span> <span class="pl-v">DatePicker</span> <span class="pl-k">from</span> <span class="pl-s">'react-datepicker2'</span><span class="pl-kos">;</span> <span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-v">ReactClass</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span> <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-smi">super</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">value</span>: <span class="pl-en">moment</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">}</span><span class="pl-kos">;</span> <span class="pl-kos">}</span> <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-c1"><</span><span class="pl-ent">DatePicker</span> <span class="pl-c1">onChange</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">value</span> <span class="pl-c1">=></span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> value <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">}</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">value</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">></span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> |
Configuration
The most basic use of the DatePicker can be described with:
|
1 |
<span class="pl-c1"><</span><span class="pl-ent">DatePicker</span> <span class="pl-c1">onChange</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">value</span> <span class="pl-c1">=></span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> value <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">}</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">value</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">></span> |
Local Development
The master branch contains the latest version of the Datepicker2 component. To start your example app, you can run npm install then npm start. This starts a simple webserver on http://localhost:8080.
Todo
- Write some tests
- Improve documentation
- Remove css loading dependency
- UI improvements
- Adding new highlight feature
- Adding new year picker feature
- Adding typescript support
- Adding new rangepicker feature
Built With
- moment-jalaali – A Jalaali (Jalali, Persian, Khorshidi, Shamsi) calendar system plugin for moment.js.
Thanks
Special thanks to @mohebifar for his open-source project which this component is based on.
Contributing
Contributions are welcome and will be fully credited. I’d be happy to accept PRs for that.
License
Copyright (c) 2016 mberneti Inc. and individual contributors. Licensed under MIT license, see LICENSE for the full license.
Source: https://github.com/mberneti/react-datepicker2/
Demo: https://mberneti.github.io/react-datepicker2/
