edit

Options

Config

This is default config class

Kind: global constant

• Config
  • .inline : boolean
  • .initialValue : boolean
  • .persianDigit : boolean
  • .viewMode : string
  • .format : boolean
  • .altField : boolean
  • .altFormat : string
  • .minDate : Date
  • .maxDate : Date
  • .navigator : object
    • .enabled : boolean
    • .scroll : object
      • .enabled : boolean
    • .text
      • .btnNextText
      • .btnPrevText
    • "onNext" (navigator)
    • "onPrev" (navigator)
    • "onSwitch" (navigator)
  • .toolbox : object
    • .enabled : boolean
    • .text : object
      • .btnToday : string
    • "onToday" (toolbox)
  • .onlyTimePicker : boolean
  • .onlySelectOnDate : boolean
  • .timePicker : object
    • .enabled : boolean
    • .step : number
    • .hour : object
      • .enabled : boolean
      • .step : boolean
    • .minute : object
      • .enabled : boolean
      • .step : boolean
    • .second : object
      • .enabled : boolean
      • .step : boolean
    • .meridiem : object
      • .enabled : boolean
  • .dayPicker : object
    • .enabled : boolean
    • .titleFormat : string
    • .titleFormatter(year, month) ⇒ *
    • "onSelect" (selectedDayUnix)
  • .monthPicker : object
    • .enabled : boolean
    • .titleFormat : string
    • .titleFormatter(unix) ⇒ *
    • "onSelect" (monthIndex)
  • .yearPicker : object
    • .enabled : boolean
    • .titleFormat : string
    • .titleFormatter(year) ⇒ string
    • "onSelect" (year)
  • .position : mix
  • .autoClose : boolean
  • .template : string
  • .observer : boolean
  • .inputDelay : number
  • .formatter(unixDate)
  • .altFieldFormatter(unixDate)
  • .checkDate() : function
  • .checkMonth() : function
  • .checkYear() : function
  • .onToggle()
  • .onDestroy()
  • "onSelect" (unixDate)
  • "onShow"
  • "onHide" (self)

Config.inline : boolean

if true datepicker render inline

Kind: static property of Config
Default: false

Config.initialValue : boolean

Kind: static property of Config
Default: true

Config.persianDigit : boolean

Kind: static property of Config
Default: true

Config.viewMode : string

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. http://babakhani.github.io/PersianWebToolkit/doc/persiandate/0.1.8/#/displaying/format/

Kind: static property of Config
Default: 'LLLL'

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

Config.altFormat : string

the date format, combination of d, dd, m, mm, yy, yyy. http://babakhani.github.io/PersianWebToolkit/doc/persiandate/0.1.8/#/displaying/format/

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

Config.minDate : Date

set min date on datepicker

Kind: static property of Config
Default: null
Properties

Name
minDate

Config.maxDate : Date

set max date on datepicker

Kind: static property of Config
Default: null
Properties

Name
maxDate

Config.navigator : object

navigator config object

Kind: static property of Config
Default: true

• .navigator : object
  • .enabled : boolean
  • .scroll : object
    • .enabled : boolean
  • .text
    • .btnNextText
    • .btnPrevText
  • "onNext" (navigator)
  • "onPrev" (navigator)
  • "onSwitch" (navigator)

navigator.enabled : boolean

Enable or Disable dayPicker

Kind: static property of navigator
Default: true

navigator.scroll : object

scroll navigation options

Kind: static property of navigator

scroll.enabled : boolean

Kind: static property of scroll
Default: true

navigator.text

navigator text config object

Kind: static property of navigator

• .text
  • .btnNextText
  • .btnPrevText

text.btnNextText

text of next btn

Kind: static property of text
Default: '<'

text.btnPrevText

text of prev btn

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

"onNext" (navigator)

Trigger When Next button clicked

Kind: event emitted by navigator

Param
navigator

Example

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

"onPrev" (navigator)

Trigger When Prev button clicked

Kind: event emitted by navigator

Param
navigator

Example

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

"onSwitch" (navigator)

Trigger When Switch view button clicked

Kind: event emitted by navigator

Param
navigator

Example

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

Config.toolbox : object

toolbox config object

Kind: static property of Config
Default: true

• .toolbox : object
  • .enabled : boolean
  • .text : object
    • .btnToday : string
  • "onToday" (toolbox)

toolbox.enabled : boolean

Kind: static property of toolbox
Default: true

toolbox.text : object

Kind: static property of toolbox

text.btnToday : string

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

"onToday" (toolbox)

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

Kind: static property of Config
Default:: true
Properties

Name
justSelectOnDate

Config.timePicker : object

timepicker config object

Kind: static property of Config

• .timePicker : object
  • .enabled : boolean
  • .step : number
  • .hour : object
    • .enabled : boolean
    • .step : boolean
  • .minute : object
    • .enabled : boolean
    • .step : boolean
  • .second : object
    • .enabled : boolean
    • .step : boolean
  • .meridiem : object
    • .enabled : boolean

timePicker.enabled : boolean

Kind: static property of timePicker

timePicker.step : number

Kind: static property of timePicker

timePicker.hour : object

Kind: static property of timePicker

• .hour : object
  • .enabled : boolean
  • .step : boolean

hour.enabled : boolean

Kind: static property of hour

hour.step : boolean

overwrite by parent step

Kind: static property of hour

timePicker.minute : object

Kind: static property of timePicker

• .minute : object
  • .enabled : boolean
  • .step : boolean

minute.enabled : boolean

Kind: static property of minute

minute.step : boolean

overwrite by parent step

Kind: static property of minute

timePicker.second : object

Kind: static property of timePicker

• .second : object
  • .enabled : boolean
  • .step : boolean

second.enabled : boolean

Kind: static property of second

second.step : boolean

overwrite by parent step

Kind: static property of second

timePicker.meridiem : object

Kind: static property of timePicker

meridiem.enabled : boolean

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

Kind: static property of meridiem

Config.dayPicker : object

dayPicker config object

Kind: static property of Config

• .dayPicker : object
  • .enabled : boolean
  • .titleFormat : string
  • .titleFormatter(year, month) ⇒ *
  • "onSelect" (selectedDayUnix)

dayPicker.enabled : boolean

Kind: static property of dayPicker
Default: true

dayPicker.titleFormat : string

Kind: static property of dayPicker
Default: "'YYYY MMMM'"

dayPicker.titleFormatter(year, month) ⇒ *

Kind: static method of dayPicker

Param
year
month

"onSelect" (selectedDayUnix)

Kind: event emitted by dayPicker

Param
selectedDayUnix

Config.monthPicker : object

monthPicker config object

Kind: static property of Config

• .monthPicker : object
  • .enabled : boolean
  • .titleFormat : string
  • .titleFormatter(unix) ⇒ *
  • "onSelect" (monthIndex)

monthPicker.enabled : boolean

Kind: static property of monthPicker
Default: true

monthPicker.titleFormat : string

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

monthPicker.titleFormatter(unix) ⇒ *

Kind: static method of monthPicker

Param
unix

"onSelect" (monthIndex)

Kind: event emitted by monthPicker

Param
monthIndex

Config.yearPicker : object

yearPicker config object

Kind: static property of Config

• .yearPicker : object
  • .enabled : boolean
  • .titleFormat : string
  • .titleFormatter(year) ⇒ string
  • "onSelect" (year)

yearPicker.enabled : boolean

Kind: static property of yearPicker
Default: true

yearPicker.titleFormat : string

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

yearPicker.titleFormatter(year) ⇒ string

Kind: static method of yearPicker

Param
year

"onSelect" (year)

Kind: event emitted by yearPicker

Param
year

Config.position : mix

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 picker close When Select day

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}}
     {{#meridiem.enabled}}
     <div class="meridiem time-segment" data-time-key="meridian" >
     <div class="up-btn" data-time-key="meridiem">▲</div>
     <input value="{{meridiem.title}}" type="text" class="meridiem-input">
     <div class="down-btn" data-time-key="meridiem">▼</div>
     </div>
     {{/meridiem.enabled}}
     </div>
     {{/enabled}}
     {{/time}}

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

Config.observer : boolean

Deprecated

observer

Kind: static property of Config
Default: false

Config.inputDelay : number

inputDelay

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

check date avalibility

Kind: static method of Config

Config.checkMonth() : function

check month avalibility

Kind: static method of Config

Config.checkYear() : function

check year avalibility

Kind: static method of Config

Config.onToggle()

Kind: static method of Config

Config.onDestroy()

Kind: static method of Config

"onSelect" (unixDate)

A function that takes current datepicker unixDate. It is called When Day Select.

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" (self)

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

Kind: event emitted by Config

Param
self