https://github.com/abublihi/hijri-date-picker

A simple and reusble react component for hijir date pickre.
https://github.com/abublihi/hijri-date-picker

Last synced: 18 days ago
JSON representation

A simple and reusble react component for hijir date pickre.

• Host: GitHub
• URL: https://github.com/abublihi/hijri-date-picker
• Owner: abublihi
• License: mit
• Created: 2018-05-14T19:27:23.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T17:53:59.000Z (over 1 year ago)
• Last Synced: 2024-05-22T16:12:58.217Z (about 2 months ago)
• Language: JavaScript
• Size: 1.54 MB
• Stars: 26
• Watchers: 4
• Forks: 18
• Open Issues: 16
• Metadata Files:
  • Readme: README.md

Lists

• awesome-hijri - hijri-date-picker - مكون بسيط لإختيار التاريخ في الويب، تم عمله بواسطة [رياكت](https://reactjs.org). (أدوات للمطورين / جافاسكربت Javascript)
• Awesome-Muslims - Hijri Date Picker

README

        
# React Hijri DatePicker

A simple and reusble react component for hijir date pickre.

# If you want a `standalone` web component take a look at [datepicker hijri](https://github.com/abublihi/datepicker-hijri)

# Installation

The package can be installed using npm, this package requires you to install *moment-hijri*, *react-popper*, *react-onclickoutside* and *styled_components*

```

npm i hijri-date-picker

```

Or with script tag

```html

```

# Usage

### Example 1: npm installation

```javascript

import React from  'react';

import ReactDOM from  'react-dom';

import HijriDatePicker from 'hijri-date-picker';

ReactDOM.render(, document.getElementById('root'));

```

### Example 2: script tag

```html

  

    

    

    React Hijri DatePicker

  

  

    

  

  

```

 

![without quick](https://image.ibb.co/nmvSAA/hijri-date-picker-no-Quick-Select.png "without quick")

### The `prop`  quickSelect

this adds a quick select for year and month only add to the props `quickSelect`

```Html

```

for the tag example will be `quick-select="true"`

```Html

```

![without quick](https://image.ibb.co/m9tEqA/hijri-date-picker-with-Quick-Select.png "with quick")

### Date Format 'Default is `iYYYY/iMM/iDD`'

we are using moment and exactly moment hijri so any format for [moment-hijri](https://github.com/xsoh/moment-hijri) package will work fine, so any format must have the letter `i` before it e.g. (`YYYY-MM-DD` -> `iYYYY-iMM-iDD`).

Thank You @xsoh for the awesome package *moment-hijri*