edit

Example

normal example

$('.normal-example').persianDatepicker();

<input class="normal-example" />

without initialValue

$('.initial-value-example').persianDatepicker({
    initialValue: false
});

<input class="initial-value-example" />

initialValueType

$('.initial-value-type-example').persianDatepicker({
    initialValueType: 'persian'
});

<input class="initial-value-type-example" value="1396-10-12" />


$('.initial-value-type-gregorian-example').persianDatepicker({
    initialValueType: 'gregorian'
});

<input class="initial-value-type-gregorian-example" value="2017-1-1" />

inline

$('.inline-example').persianDatepicker({
    inline: true,
    altField: '#inlineExampleAlt',
    altFormat: 'LLLL',
    toolbox:{
        calendarSwitch:{
            enabled: true
        }
    },
    navigator:{
        scroll:{
            enabled: false
        }
    },
    maxDate: new persianDate().add('month', 3).valueOf(),
    minDate: new persianDate().subtract('month', 3).valueOf(),
    timePicker: {
        enabled: true,
        meridiem: {
            enabled: true
        }
    }
});

```html
<input id="inlineExampleAlt" class="datepicker-demo" />
<div class="inline-example" ></div>

Gregorian Calendar

$('.gregorian-example').persianDatepicker({
    inline: true,
    altField: '#gregorianExampleAlt',
    altFormat: 'LLLL',
    calendarType: 'gregorian',
    toolbox:{
        calendarSwitch:{
            enabled: true
        }
    },
    navigator:{
        scroll:{
            enabled: false
        }
    },
    maxDate: new persianDate().add('month', 3).valueOf(),
    minDate: new persianDate().subtract('month', 3).valueOf(),
    timePicker: {
        enabled: true,
        meridiem: {
            enabled: true
        }
    }
});

<input id="gregorianExampleAlt" class="datepicker-demo" />
<div class="gregorian-example" ></div>

Change Leap Year Mode

$('.leapyear-algorithmic').persianDatepicker({
    inline: true,

});

$('.leapyear-astronomical').persianDatepicker({
    inline: true,
    calendar:{
        persian: {
            leapYearMode: 'astronomical'
        }
    }
});

<div class="leapyear-algorithmic" data-date="2025/3/12" ></div>
<div class="leapyear-astronomical" data-date="2025/3/12" ></div>

locale

$('.locale-fa').persianDatepicker({
    inline: true,

});

$('.locale-en').persianDatepicker({
    inline: true,
    calendar:{
        persian: {
            locale: 'en'
        }
    }
});

<div class="locale-fa" ></div>
<div class="locale-en" ></div>

Observer

true, make user able to edit date by keyboard

$('.observer-example').persianDatepicker({
    observer: true,
    format: 'YYYY/MM/DD',
    altField: '.observer-example-alt'
});

<input class="observer-example" />

format

More options in Persian Date Documents

$('.format-example').persianDatepicker({
    format: 'LLLL' 
});

<input class="format-example" />

formatter

$('.formatter-example').persianDatepicker({
    formatter: function(unix){
        return 'selected unix: ' + unix; 
    } 
});

<input class="formatter-example" />

altField

$('.alt-field-example').persianDatepicker({
    altField: '.alt-field-example-alt-field'
});

<input class="alt-field-example" />

viewMode

$('.view-mode-example').persianDatepicker({
    viewMode: 'year'
});

<input class="view-mode-example" />

minDate

$('.min-date-example').persianDatepicker({
    minDate: new persianDate().unix()
});

<input class="min-date-example" />

maxDate

$('.max-date-example').persianDatepicker({
    maxDate: new persianDate().unix()
});

<input class="max-date-example" />

checkDate

$('.check-date-example').persianDatepicker({
    checkDate: function(unix){
        return new persianDate(unix).day() != 4;
    }
});

<input class="check-date-example" />

checkMonth

$('.check-month-example').persianDatepicker({
    checkMonth: function(month){
        return month < 6;
    }
});

<input class="check-month-example" />

checkYear

$('.check-year-example').persianDatepicker({
    checkYear: function(year){
        return year >= 1391;
    }
});

<input class="check-year-example" />

onlyTimePicker

$('.only-timepicker-example').persianDatepicker({
    onlyTimePicker: true
});

<input class="only-timepicker-example" />

autoClose

$('.auto-close-example').persianDatepicker({
    autoClose: true
});

<input class="auto-close-example" />

onSelect

$('.on-select-example').persianDatepicker({
    onSelect: function(unix){
        console.log('datepicker select : ' + unix);
    }
});

<input class="on-select-example" />

Range selector

Range Selector that make sure 'to' date is after 'from' date and also 'from' is before 'to' date.

var to, from;
to = $(".range-to-example").persianDatepicker({
    inline: true,
    altField: '.range-to-example-alt',
    altFormat: 'LLLL',
    initialValue: false,
    onSelect: function (unix) {
        to.touched = true;
        if (from && from.options && from.options.maxDate != unix) {
            var cachedValue = from.getState().selected.unixDate;
            from.options = {maxDate: unix};
            if (from.touched) {
                from.setDate(cachedValue);
            }
        }
    }
});
from = $(".range-from-example").persianDatepicker({
    inline: true,
    altField: '.range-from-example-alt',
    altFormat: 'LLLL',
    initialValue: false,
    onSelect: function (unix) {
        from.touched = true;
        if (to && to.options && to.options.minDate != unix) {
            var cachedValue = to.getState().selected.unixDate;
            to.options = {minDate: unix};
            if (to.touched) {
                to.setDate(cachedValue);
            }
        }
    }
});

<div class="range-from-example"></div>
<div class="range-to-example"></div>