search

balbarak / bootstrap-hijri-datepicker

Bootstrap Hijri Date picker
MIT License
56 stars 53 forks source link
datepicker datetimepicker hijri hijri-calendar hijri-date hijri-dates-converter

readme

Demo

See Live Demo

Getting Started

Bootstrap Hijri Date picker v1.0.0

sample sample two

Installation

Download the latest release or use css and javascript files in dist folder

Required libraries

Usage

includes

css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />

<link href="https://github.com/balbarak/bootstrap-hijri-datepicker/blob/master/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />

js

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>

<script src="https://github.com/balbarak/bootstrap-hijri-datepicker/raw/master/js/bootstrap-hijri-datepicker.min.js"></script>

html

 <div class="form-group">
    <label>
        Date
    </label>
    <div class="input-group">
        <input type='text' class="form-control" id="hijri-date-input" />
    </div>
</div>

javascript

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://github.com/balbarak/bootstrap-hijri-datepicker/raw/master/js/bootstrap-hijri-datepicker.min.js"></script>

<script type="text/javascript">
    $(function () {
        $("#hijri-date-input").hijriDatePicker();
    });
</script>

Complete Sample

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>
        Bootstrap Hijri Date Picker
    </title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
    <link href="https://github.com/balbarak/bootstrap-hijri-datepicker/blob/master/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />

</head>
<body class="bg-light">
    <div class="container">

        <div class="form-group">
            <label>
                Date
            </label>
            <div class="input-group">
                <input type='text' class="form-control" id="hijri-date-input" />
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
    <script src="https://github.com/balbarak/bootstrap-hijri-datepicker/raw/master/js/bootstrap-hijri-datepicker.min.js"></script>
    <script type="text/javascript">

        $(function () {

            $("#hijri-date-input").hijriDatePicker();

        });

    </script>

</body>
</html>

Docs

See Documentation

Acknowledgements

This project was built from great work done by