search

abublihi / hijri-date-picker

A simple and reusble react component for hijir date pickre.
MIT License
26 stars 18 forks source link

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

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

<script src="https://github.com/abublihi/hijri-date-picker/raw/master/dist/hijir-date-picker.js"></script>

Usage

Example 1: npm installation

import React from  'react';
import ReactDOM from  'react-dom';
import HijriDatePicker from 'hijri-date-picker';

ReactDOM.render(<HijriDatePicker inputName="hijri_date" className="form-control" selectedDate="1439/08/02" dateFormat="iYYYY/iMM/iDD" />, document.getElementById('root'));

Example 2: script tag

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>React Hijri DatePicker</title>
  </head>
  <body>
    <hijri-date-picker input-name="hijri_date" class-name="form-control" selected-date="1439/08/02" date-format="iYYYY/iMM/iDD"></hijri-date-picker>
  </body>
  <script src="https://github.com/abublihi/hijri-date-picker/raw/master/dist/hijir-date-picker.js"></script>
</html>

without quick

The prop quickSelect

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

<HijriDatePicker inputName="hijri_date" className="form-control" selectedDate="1439/08/02" dateFormat="iMM/iYYYY/iDD" quickSelect/>

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

<hijri-date-picker input-name="hijri_date" class-name="form-control" selected-date="1439/08/02" date-format="iMM/iYYYY/iDD" quick-select="true"></hijri-date-picker>

without quick

Date Format 'Default is iYYYY/iMM/iDD'

we are using moment and exactly moment hijri so any format for 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