Options

hijri

type: boolean
default: false
values: true, false 

        
    $('#picker').hijriDatePicker({
        hijri:true
    });

viewMode

type: string
default: days
values: years, months, days 

        
    $('#picker').hijriDatePicker({
        hijri:true,
        viewMode:'months'
    });

format

Gregorian date format
type: string
default: DD-MM-YYYY
values: moment js format 

        
    $('#picker').hijriDatePicker({
        format:'D/M/YYYY'
    });

hijriFormat

Hijri date format
type: string
default: iYYYY-iMM-iDD
values: moment js format 

        
    $('#picker').hijriDatePicker({
        hijriFormat:'iD/iM/iYYYY'
    });

locale

picker language
type: string
default: ar-SA 

        
    $('#picker').hijriDatePicker({
        locale:'en-us'
    });

minDate

Min supported date is : 1950-01-01
type: string
default: 1950-01-01 

        
    $('#picker').hijriDatePicker({
        viewMode: 'years',
        minDate:'2018-01-15',
        maxDate:'2020-05-06'
    });

maxDate

Max supported date is : 2070-01-01
type: string
default: 2070-01-01 

        
    $('#picker').hijriDatePicker({
        viewMode: 'years',
        minDate: '2018-01-16',
        maxDate: '2020-06-27'
    });

viewDate

Display default view date. In order to use it you must set userCurrent: false
type: string
default: 2070-01-01 

        
    $('#picker').hijriDatePicker({
        viewMode: 'years',
        useCurrent: false,
        viewDate:'1980-01-15'
    });

useCurrent

Set input with today date when datepicker popup
type: boolean
default: false 

        
    $('#picker').hijriDatePicker({
        useCurrent: false
    });

showSwitcher

show switch Gregorian/Hijri dates button
type: boolean
default: true 

        
    $('#picker').hijriDatePicker({
        showSwitcher: false
    });

showClear

show clear dates button
type: boolean
default: false 

        
    $('#picker').hijriDatePicker({
        showClear: true
    });

showClose

show close button
type: boolean
default: false 

        
    $('#picker').hijriDatePicker({
        showClose: true
    });

showTodayButton

show today button
type: boolean
default: false 

        
    $('#picker').hijriDatePicker({
        showTodayButton: true
    });

icons

change action text 

        
    $('#picker').hijriDatePicker({
        showTodayButton: true,
        showClose: true,
        showClear: true,
        icons: {
            previous: '<',
            next: '>',
            today: 'تاريخ اليوم',
            clear: 'حذف',
            close: 'اغلاق'
        },
        hijriText: "عرض التاريخ الهجري",
        gregorianText: "عرض التاريخ الميلادي"
    });

Events

on change

change action text

Selected Date: 

        
    $("#picker-15").hijriDatePicker({
        showTodayButton: true,
        showClear:true,
        useCurrent:false
    });

    $("#picker-15").on('dp.change', function (arg) {

        if (!arg.date) {
            $("#selected-date").html('');
            return;
        };

        let date = arg.date;

        $("#selected-date").html(date.format("YYYY/M/D") + " Hijri:" + date.format("iYYYY/iM/iD"));
    });