Code Monkey home page Code Monkey logo

hijri-date-picker's Introduction

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="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>

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.