edit

Config

persian-datepicker configuration document

Kind: global constant

Config.calendarType : string

set default calendar mode of datepicker, available options: 'persian', 'gregorian'

Kind: static property of Config
Default: "'persian'"
Since: 1.0.0

Config.calendar : object

calendar type and localization configuration

Kind: static property of Config
Since: 1.0.0
Example 

{
    'persian': {
        'locale': 'fa',
        'showHint': false,
        'leapYearMode': 'algorithmic' // "astronomical"
    },

    'gregorian': {
        'locale': 'en',
        'showHint': false
    }
}

calendar.persian : object

Persian calendar configuration

Kind: static property of calendar
Since: 1.0.0

persian.locale : string

set locale of Persian calendar available options: 'fa', 'en'

Kind: static property of persian
Default: "'fa'"
Since: 1.0.0

persian.showHint : boolean

if set true, small date hint of this calendar will be shown on another calendar

Kind: static property of persian
Default: false
Since: 1.0.0

persian.leapYearMode : string

Persian calendar leap year calculation mode, available options: 'algorithmic', 'astronomical'

Kind: static property of persian
Default: "'algorithmic'"
Link: http://babakhani.github.io/PersianWebToolkit/doc/persian-date/leapyear
Since: 1.0.0

calendar.gregorian : object

Gregorian calendar configuration

Kind: static property of calendar
Since: 1.0.0

gregorian.locale : string

set locale of Gregorian calendar available options: 'fa', 'en'

Kind: static property of gregorian
Default: "'en'"
Since: 1.0.0

gregorian.showHint : boolean

if set true, small date hint of this calendar will be shown on another calendar

Kind: static property of gregorian
Default: false
Since: 1.0.0

Config.responsive : boolean

if set true make enable responsive view on mobile devices

Kind: static property of Config
Default: true
Since: 1.0.0

Config.inline : boolean

if true datepicker render inline

Kind: static property of Config
Default: false

Config.initialValue : boolean

If set true datepicker init with input value date, use data-date property when you want set inline datepicker initial value

Kind: static property of Config
Default: true

Config.initialValueType : boolean

Initial value calendar type, accept: 'persian', 'gregorian'

Kind: static property of Config
Default: true

Config.persianDigit : boolean

Deprecated

from v1.0.0 this options is deprecated, use calendar.persian.locale instead

Kind: static property of Config
Default: true

Config.viewMode : string

default view mode, Acceptable value : day,month,year

Kind: static property of Config
Default: "'day'"

Config.format : boolean

the date format, combination of d, dd, m, mm, yy, yyy.

Kind: static property of Config
Default: 'LLLL'
Link: http://babakhani.github.io/PersianWebToolkit/doc/persian-date/#format

Config.altField : boolean

An input element that is to be updated with the selected date from the datepicker. Use the altFormat option to change the format of the date within this field. Leave as blank for no alternate field. acceptable value: : '#elementId','.element-class'

Kind: static property of Config
Default: false
Example 

altField: '#inputAltFirld'

altField: '.input-alt-field'

Config.altFormat : string

the date format, combination of d, dd, m, mm, yy, yyy.

Kind: static property of Config
Default: "'unix'"
Link: http://babakhani.github.io/PersianWebToolkit/doc/persian-date/#format

Config.minDate : Date

Set min date on datepicker, prevent user select date before given unix time

Kind: static property of Config
Default: null
Properties

Name
minDate

Config.maxDate : Date

Set max date on datepicker, prevent user select date after given unix time

Kind: static property of Config
Default: null
Properties

Name
maxDate

Config.navigator : object

navigator config object

Kind: static property of Config
Default: true

make navigator enable or disable

Kind: static property of navigator
Default: true

scroll navigation options

Kind: static property of navigator

scroll.enabled : boolean

if you want make disable scroll navigation set this option false

Kind: static property of scroll
Default: true

navigator text config object

Kind: static property of navigator

text.btnNextText

text of next button

Kind: static property of text
Default: '<'

text.btnPrevText

text of prev button

Kind: static property of text
Default:: '>'

"onNext"

Called when navigator goes to next state

Kind: event emitted by navigator
Example 

function (navigator) {
     //log('navigator next ');
 }

"onPrev"

Called when navigator goes to previews state

Kind: event emitted by navigator
Example 

function (navigator) {
     //log('navigator prev ');
 }

"onSwitch"

Called when navigator switch

Kind: event emitted by navigator
Example 

function (datepickerObject) {
                // console.log('navigator switch ');
 }

Config.toolbox : object

toolbox config object

Kind: static property of Config
Default: true

toolbox.enabled : boolean

boolean option that make toolbar enable or disable

Kind: static property of toolbox
Default: true

toolbox.text : object

Deprecated

toolbox button text configuration

Kind: static property of toolbox

text.btnToday : string

Deprecated

text of today button, deprecated from 1.0.0

Kind: static property of text
Default: "'امروز'"

toolbox.submitButton

submit button configuration (only shown on mobile)

Kind: static property of toolbox
Since: 1.0.0

submitButton.enabled : boolean

make submit button enable or disable

Kind: static property of submitButton
Default: false
Since: 1.0.0

submitButton.text : object

submit button text

Kind: static property of submitButton
Since: 1.0.0

text.fa : object

show when current calendar is Persian

Kind: static property of text
Default: تایید
Since: 1.0.0

text.en : object

show when current calendar is Gregorian

Kind: static property of text
Default: submit
Since: 1.0.0

"onSubmit"

Called when submit button clicked

Kind: event emitted by submitButton
Since: 1.0.0

toolbox.todayButton

toolbox today button configuration

Kind: static property of toolbox
Since: 1.0.0

todayButton.enabled : boolean

make toolbox today button enable or disable

Kind: static property of todayButton
Since: 1.0.0

todayButton.text : object

today button text

Kind: static property of todayButton
Since: 1.0.0

text.fa : object

show when current calendar is Persian

Kind: static property of text
Default: امروز
Since: 1.0.0

text.en : object

show when current calendar is Gregorian

Kind: static property of text
Default: today
Since: 1.0.0

"onToday"

Called when today button clicked

Kind: event emitted by todayButton
Since: 1.0.0

toolbox.calendarSwitch : object

toolbox calendar switch configuration

Kind: static property of toolbox
Since: 1.0.0

calendarSwitch.enabled : boolean

make calendar switch enable or disable

Kind: static property of calendarSwitch
Default: true
Since: 1.0.0

calendarSwitch.format : string

calendar switch text format string

Kind: static property of calendarSwitch
Default: "MMMM"
Link: http://babakhani.github.io/PersianWebToolkit/doc/persian-date/#format
Since: 1.0.0

"onSwitch"

Called when calendar switch clicked

Kind: event emitted by calendarSwitch
Since: 1.0.0

"onToday" (toolbox)

Deprecated

Kind: event emitted by toolbox

Param
toolbox

Example 

function (toolbox) {
     //log('toolbox today btn');
 }

Config.onlyTimePicker : boolean

if true all pickers hide and just show timepicker

Kind: static property of Config
Default: false

Config.onlySelectOnDate : boolean

if true date select just by click on day in month grid, and when user select month or year selected date doesnt change

Kind: static property of Config
Default:: true
Properties

Name
justSelectOnDate

Config.timePicker : object

timePicker configuration

Kind: static property of Config

timePicker.enabled : boolean

make timePicker enable or disable

Kind: static property of timePicker

timePicker.step : number

The amount that increases or decreases by pressing the button

Kind: static property of timePicker

timePicker.hour : object

hour selector configuration

Kind: static property of timePicker

hour.enabled : boolean

make hour selector enable or disable

Kind: static property of hour

hour.step : boolean

The amount that increases or decreases hour, by pressing the button. overwrite by timepicker.step

Kind: static property of hour

timePicker.minute : object

minute selector configuration

Kind: static property of timePicker

minute.enabled : boolean

make minute selector enable or disable

Kind: static property of minute

minute.step : boolean

overwrite by parent step

Kind: static property of minute

timePicker.second : object

second selector configuration

Kind: static property of timePicker

second.enabled : boolean

make second selector enable or disable

Kind: static property of second

second.step : boolean

The amount that increases or decreases second, by pressing the button. overwrite by timepicker.step

Kind: static property of second

timePicker.meridian : object

meridian selector configuration

Kind: static property of timePicker

meridian.enabled : boolean

if you set this as false, datepicker timepicker system moved to 24-hour system

Kind: static property of meridian

Config.dayPicker : object

dayPicker configuration

Kind: static property of Config

dayPicker.enabled : boolean

make daypicker enable or disable

Kind: static property of dayPicker
Default: true

dayPicker.titleFormat : string

daypicker title format string

Kind: static property of dayPicker
Default: "'YYYY MMMM'"
Link: http://babakhani.github.io/PersianWebToolkit/doc/persian-date/#format

dayPicker.titleFormatter(year, month) ⇒ *

daypicker title formatter function

Kind: static method of dayPicker

Param
year
month

"onSelect" (selectedDayUnix)

fired when user select date

Kind: event emitted by dayPicker

Param
selectedDayUnix

Config.monthPicker : object

monthPicker configuration

Kind: static property of Config

monthPicker.enabled : boolean

make monthPicker enable or disable

Kind: static property of monthPicker
Default: true

monthPicker.titleFormat : string

monthPicker title format string

Kind: static property of monthPicker
Default: "'YYYY'"

monthPicker.titleFormatter(unix) ⇒ *

monthPicker title formatter function

Kind: static method of monthPicker

Param
unix

"onSelect" (monthIndex)

fired when user select month

Kind: event emitted by monthPicker

Param
monthIndex

Config.yearPicker : object

yearPicker configuration

Kind: static property of Config

yearPicker.enabled : boolean

make yearPicker enable or disable

Kind: static property of yearPicker
Default: true

yearPicker.titleFormat : string

yearPicker title format string

Kind: static property of yearPicker
Default: "'YYYY'"

yearPicker.titleFormatter(year) ⇒ string

yearPicker title formatter function

Kind: static method of yearPicker

Param
year

"onSelect" (year)

fired when user select year

Kind: event emitted by yearPicker

Param
year

Config.position : string | array

position of datepicker relative to input element

Kind: static property of Config
Default: "'auto'"
Example 

'position': 'auto'
'position': [10,10]

Config.autoClose : boolean

If true datepicker close When select a date

Kind: static property of Config
Default: false

Config.template : string

by default datepicker have a template string, and you can overwrite it simply by replace string in config.

Kind: static property of Config
Example 

<div id="plotId" class="datepicker-plot-area datepicker-plot-area-inline-view">
     {{#navigator.enabled}}
     <div class="navigator">
     <div class="datepicker-header">
     <div class="btn btn-next">{{navigator.text.btnNextText}}</div>
     <div class="btn btn-switch">{{ navigator.switch.text }}</div>
     <div class="btn btn-prev">{{navigator.text.btnPrevText}}</div>
     </div>
     </div>
     {{/navigator.enabled}}
     <div class="datepicker-grid-view" >
     {{#days.enabled}}
     {{#days.viewMode}}
     <div class="datepicker-day-view" >
     <div class="month-grid-box">
     <div class="header">
     <div class="title"></div>
     <div class="header-row">
     <div class="header-row-cell">ش</div>
     <div class="header-row-cell">ی</div>
     <div class="header-row-cell">د</div>
     <div class="header-row-cell">س</div>
     <div class="header-row-cell">چ</div>
     <div class="header-row-cell">پ</div>
     <div class="header-row-cell">ج</div>
     </div>
     </div>
     <table cellspacing="0" class="table-days">
     <tbody>
     {{#days.list}}

     <tr>
     {{#.}}

     {{#enabled}}
     <td data-unix="{{dataUnix}}" ><span  class="{{#otherMonth}}other-month{{/otherMonth}} {{#selected}}selected{{/selected}}">{{title}}</span></td>
     {{/enabled}}
     {{^enabled}}
     <td data-unix="{{dataUnix}}" class="disabled"><span class="{{#otherMonth}}other-month{{/otherMonth}}">{{title}}</span></td>
     {{/enabled}}

     {{/.}}
     </tr>
     {{/days.list}}
     </tbody>
     </table>
     </div>
     </div>
     {{/days.viewMode}}
     {{/days.enabled}}

     {{#month.enabled}}
     {{#month.viewMode}}
     <div class="datepicker-month-view">
     {{#month.list}}
     {{#enabled}}
     <div data-month="{{dataMonth}}" class="month-item {{#selected}}selected{{/selected}}">{{title}}</small></div>
     {{/enabled}}
     {{^enabled}}
     <div data-month="{{dataMonth}}" class="month-item month-item-disable {{#selected}}selected{{/selected}}">{{title}}</small></div>
     {{/enabled}}
     {{/month.list}}
     </div>
     {{/month.viewMode}}
     {{/month.enabled}}

     {{#year.enabled }}
     {{#year.viewMode }}
     <div class="datepicker-year-view" >
     {{#year.list}}
     {{#enabled}}
     <div data-year="{{dataYear}}" class="year-item {{#selected}}selected{{/selected}}">{{title}}</div>
     {{/enabled}}
     {{^enabled}}
     <div data-year="{{dataYear}}" class="year-item year-item-disable {{#selected}}selected{{/selected}}">{{title}}</div>
     {{/enabled}}
     {{/year.list}}
     </div>
     {{/year.viewMode }}
     {{/year.enabled }}

     </div>
     {{#time}}
     {{#enabled}}
     <div class="datepicker-time-view">
     {{#hour.enabled}}
     <div class="hour time-segment" data-time-key="hour">
     <div class="up-btn" data-time-key="hour">▲</div>
     <input value="{{hour.title}}" type="text" placeholder="hour" class="hour-input">
     <div class="down-btn" data-time-key="hour">▼</div>
     </div>
     <div class="divider">:</div>
     {{/hour.enabled}}
     {{#minute.enabled}}
     <div class="minute time-segment" data-time-key="minute" >
     <div class="up-btn" data-time-key="minute">▲</div>
     <input value="{{minute.title}}" type="text" placeholder="minute" class="minute-input">
     <div class="down-btn" data-time-key="minute">▼</div>
     </div>
     <div class="divider second-divider">:</div>
     {{/minute.enabled}}
     {{#second.enabled}}
     <div class="second time-segment" data-time-key="second"  >
     <div class="up-btn" data-time-key="second" >▲</div>
     <input value="{{second.title}}"  type="text" placeholder="second" class="second-input">
     <div class="down-btn" data-time-key="second" >▼</div>
     </div>
     <div class="divider meridian-divider"></div>
     <div class="divider meridian-divider"></div>
     {{/second.enabled}}
     {{#meridian.enabled}}
     <div class="meridian time-segment" data-time-key="meridian" >
     <div class="up-btn" data-time-key="meridian">▲</div>
     <input value="{{meridian.title}}" type="text" class="meridian-input">
     <div class="down-btn" data-time-key="meridian">▼</div>
     </div>
     {{/meridian.enabled}}
     </div>
     {{/enabled}}
     {{/time}}

     {{#toolbox}}
     {{#enabled}}
     <div class="toolbox ">
     <div class="btn-today">{{text.btnToday}}</div>
     </div>
     {{/enabled}}
     {{/toolbox}}
     </div>

Config.observer : boolean

if true datepicker update self by user inputted date string, accept 'yyyy/mm/dd'

Kind: static property of Config
Default: false
Example 

'1396/10/2', ''

Config.inputDelay : number

waite time for last user key-down event, accept millisecond

Kind: static property of Config
Default: 800

Config.formatter(unixDate)

format value of input

Kind: static method of Config
Default: function

Param
unixDate

Example 

function (unixDate) {
     var self = this;
     var pdate = new persianDate(unixDate);
     pdate.formatPersian = this.persianDigit;
     return pdate.format(self.format);
 }

Config.altFieldFormatter(unixDate)

format value of 'altField' input

Kind: static method of Config
Default: function

Param
unixDate

Example 

function (unixDate) {
     var self = this;
     var thisAltFormat = self.altFormat.toLowerCase();
     if (thisAltFormat === 'gregorian' || thisAltFormat === 'g') {
         return new Date(unixDate);
     }
     if (thisAltFormat === 'unix' || thisAltFormat === 'u') {
         return unixDate;
     }
     else {
         var pd = new persianDate(unixDate);
         pd.formatPersian = this.persianDigit;
         return pd.format(self.altFormat);
     }
 }

Config.checkDate() : function

Validate date access before render

Kind: static method of Config

Config.checkMonth() : function

Validate month access before render

Kind: static method of Config

Config.checkYear() : function

Validate year access before render

Kind: static method of Config

"onSelect" (unixDate)

Called when date Select by user.

Kind: event emitted by Config

Param
unixDate

"onSet" (unixDate)

Called when date Select by api.

Kind: event emitted by Config

Param
unixDate

"onShow"

A function that takes current datepicker instance. It is called just before the datepicker is displayed.

Kind: event emitted by Config

"onHide"

A function that takes current datepicker instance. It is called just before the datepicker Hide.

Kind: event emitted by Config

"onToggle"

on toggle datepicker event

Kind: event emitted by Config

"onDestroy"

on destroy datepicker event

Kind: event emitted by Config