What are the JQuery Plugin have to add for Islamic Date Picker Calendar?

visit Datepicker Widget and go to localization and see various options

Also see official working example

In page add this js which is for localization

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>

and in snippet see how to initialize language

$(function() {
  $('#adverts_eventDate').datepicker($.extend({}, $.datepicker.regional['ar'], { //initialize language
    showButtonPanel: true,
    dateFormat: 'dd-mm-yy'
  }));
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://codeorigin.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
<input type="text" id="adverts_eventDate" />

I agree with you, docs on keith-wood.name is a bit complex and confusing.

If you take a look at the Usage section of jQuery Calendars Datepicker page, you will see that you need to import the following files:

  • jquery.min.js - the jQuery library
  • jquery.calendars.js
  • jquery.calendars.plus.js
  • jquery.plugin.js
  • jquery.calendars.picker.js
  • and jquery.calendars.picker.css (default style)

If you have to show an Islamic/Hijri calendar, you have to add the jquery.calendars.islamic.min.js file and add calendar: $.calendars.instance('islamic') option in the calendarsPicker function.

Here a working sample:

$('#txtHijriDate').calendarsPicker({
  calendar: $.calendars.instance('islamic'),
  monthsToShow: [2, 3],
  showOtherMonths: true,
  onSelect: function (date) {
    alert('You picked ' + date[0].formatDate());
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.plus.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.plugin.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.picker.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.islamic.min.js"></script>

<link href="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/css/jquery.calendars.picker.css" rel="stylesheet"/>

<input type="text" id="txtHijriDate">

Additional notes:

If you have to localize your Islamic calendar you can add jquery.calendars.islamic-ar.js (Arabic localisation) or jquery.calendars.islamic-fa.js (Farsi/Persian localisation).

If you need to customize datepicker's style take a look at the Layout/Style tab of this page, it shows how to add one of the provided themes (e.g. redmond.calendars.picker.css) and how they work together with jQuery UI themes.

Tags:

Javascript

Jquery

Datepicker

Recent Posts