In this article I will explain with an example, how to display Hijri (Islamic) calendar in HTML.
Download Bootstrap Hijri DatePicker Plugin
You will need to download the plugin files from the following location.
The complete documentation can be read on the following page.
HTML Markup
The HTML Markup consists of an HTML TextBox and a HTML Input Button.
<div class="container">
<div class="row">
<div class="col-md-12">
<input id="txtHijriDate" type="text" class="form-control" />
<input id="btnSubmit" type="button" class="btn btn-primary" value="Submit" />
</div>
</div>
</div>
Bootstrap Hijri DatePicker Plugin implementation
Inside the HTML Markup, first the following CSS are inherited.
1. bootstrap.min.css
2. bootstrap-datetimepicker.min.css
And then, the following JS scripts are inherited.
1. jquery.min.js
2. moment.min.js
3. moment-hijri.js
4. bootstrap-hijri-datetimepicker.js
Inside the jQuery document ready event handler, the HTML TextBox has been applied with the Bootstrap Hijri DatePicker plugin and the Button has been assigned with Click event handler.
When a date is selected and the Submit button is clicked, the value of the selected date is displayed using JavaScript Alert Message Box.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"rel="stylesheet" />
<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://cdn.jsdelivr.net/npm/moment-hijri@2.1.0/moment-hijri.js"></script>
<script src="js/bootstrap-hijri-datetimepicker.js"></script>
<script type="text/javascript">
$(function () {
$("#txtHijriDate").hijriDatePicker();
$("#btnSubmit").on("click", function () {
alert($("#txtHijriDate").val());
});
});
</script>
Screenshot
![Display Islamic Hijri Calendar in HTML]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
