Documentation

The complete API reference for the Bootstrap Hijri Datepicker.

Installation

Ensure you have jQuery, Bootstrap 4, and Moment.js loaded.

<!-- CSS -->
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">

<!-- Required JS Stack -->
<script src="js/jquery.min.js"></script>
<script src="js/moment-with-locales.js"></script>
<script src="js/moment-hijri.js"></script>
<script src="js/bootstrap-hijri-datetimepicker.js"></script>

Options

These options can be passed as an object to the hijriDatePicker() function.

Option	Type	Default	Description
`hijri`	boolean	`false`	Enables Hijri calendar by default.
`showSwitcher`	boolean	`true`	Shows the Hijri/Gregorian toggle button.
`format`	string	`'YYYY-MM-DD'`	Gregorian date format.
`hijriFormat`	string	`'iYYYY-iMM-iDD'`	Hijri date format.
`locale`	string	`'en-us'`	Localization (e.g., 'ar-sa').
`isRTL`	boolean	`false`	Force Right-to-Left layout.
`noFuture`	boolean	`false`	Prevents selection of future dates.
`viewMode`	string	`'days'`	Default view: 'days', 'months', 'years', 'decades'.
`minDate`	moment\|date\|str	`false`	The minimum allowed date.
`maxDate`	moment\|date\|str	`false`	The maximum allowed date.
`stepping`	integer	`1`	Minute increment for time picker.
`sideBySide`	boolean	`false`	Display date and time widgets together.
`showTodayButton`	boolean	`false`	Show "Today" shortcut.
`showClear`	boolean	`false`	Show "Clear" button.
`showClose`	boolean	`false`	Show "Close" button.
`keepOpen`	boolean	`false`	Keep widget open after selection.
`debug`	boolean	`false`	Forced open state for testing.
`ignoreReadonly`	boolean	`false`	Allow opening on readonly inputs.
`allowInputToggle`	boolean	`false`	Toggle picker on input click.
`daysOfWeekDisabled`	array	`[]`	Days to disable (0-6).
`disabledDates`	array	`false`	Array of specific disabled dates.
`enabledDates`	array	`false`	Array of exclusively enabled dates.
`icons`	object	`{...}`	Custom icons for toolbar (FA or Glyphicons).

Methods: Core Control

Accessed via: $('#picker').data('HijriDatePicker').methodName()

`.show()` / `.hide()` / `.toggle()`

Manually control the widget visibility.

`.disable()` / `.enable()`

Enables or disables the input field and picker interaction.

`.destroy()`

Removes the datepicker functionality and clean up the DOM elements.

Methods: Data & Values

`.date([newDate])`

Getter: Returns the current selected date as a moment object.
Setter: Takes a string, Date object, or moment object to update the value.

var val = $('#picker').data('HijriDatePicker').date();
$('#picker').data('HijriDatePicker').date('2026-04-20');

`.clear()`

Clears the selected date and the input field.

Methods: Dynamic Configuration

These methods allow you to update settings after the plugin has been initialized.

Method	Accepts	Description
`.options([object])`	Object	Get or set all options at once.
`.hijri([boolean])`	Boolean	Toggle Hijri mode on the fly.
`.locale([string])`	String	Change language (e.g., 'en', 'ar').
`.format([string])`	String	Update Gregorian format.
`.minDate([date])`	Date\|Moment	Update minimum allowed date.
`.maxDate([date])`	Date\|Moment	Update maximum allowed date.
`.viewMode([string])`	String	Change view: 'days', 'months', etc.

Events

Event	Description
`dp.change`	Triggered when the date or time changes. `e.date` contains the new value.
`dp.show`	Triggered when the picker widget is displayed.
`dp.hide`	Triggered when the picker widget is hidden.
`dp.error`	Triggered when an invalid date is entered.
`dp.update`	Triggered when the view (year/month) is changed.

                        $('#picker').on('dp.change', function(e) {
                            console.log("Date changed to: " + e.date.format('YYYY-MM-DD'));
                            });