islamic-datepicker
v1.0.7
Published
A simple and reusable react component for hijir date pickre
Downloads
17
Maintainers
adeelakramReadme
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-pickerOr with script tag
<script src="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="dist/hijir-date-picker.js"></script>
</html>
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>
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