Persian Date Picker
This Date picker work with Iranian calendar.
Jalali calendar datepicker, which depends on persianDate
More info at Wikipedia
Note: from v1.0.0 persianDatepicker support gregorian calendar
Star
Issue
Fork
Documents
Example/Demo
Playground
Table of content:
Dependency
Install
Usage
Options
See Options Full Document
CDN
persian-date.js uncompressed | minified
persian-datepicker.js uncompressed | minified
persian-datepicker.css uncompressed | minified
Dependency
persian date
jquery
m-persian-datepicker 1.x.x need persian-date 1.x.x
Install
npm install m-persian-datepicker npm i m-persian-datepicker
Usage
Options table
Options full document
name
type
default
description
calendarType
string
‘persian’
Set default calendar mode of datepicker, available options: ‘persian’, ‘gregorian’
calendar
object
Calendar type and localization configuration
calendar.persian
object
Persian calendar configuration
calendar.persian.locale
string
‘fa’
Set locale of Persian calendar available options: ‘fa’, ‘en’
calendar.persian.showHint
boolean
false
If set true, small date hint of this calendar will be shown on another calendar
calendar.persian.leapYearMode
string
algorithmic
Persian calendar leap year calculation mode, available options: ‘algorithmic’, ‘astronomical’
calendar.gregorian
object
Gregorian calendar configuration
calendar.gregorian.locale
string
‘en’
set locale of Gregorian calendar available options: ‘fa’, ‘en’
calendar.gregorian.showHint
boolean
false
If set true, small date hint of this calendar will be shown on another calendar
responsive
boolean
true
If set true make enable responsive view on mobile devices
initialValue
boolean
true
If set true datepicker init with input value date, use data-date property when you want set inline datepicker initial value
initialValueType
string
‘gregorian’
Initial value calendar type, accept: ‘persian’, ‘gregorian’
inline
boolean
false
If set true datepicker render inline
persianDigit (DEPRECATED from 1.0.0)
boolean
true
If set true all digit shows as persian digit
viewMode
string
‘day’
Accept ‘day’, ‘month’, ‘year’
format
string
‘LLLL’
The date format, combination of d, dd, m, mm, yy, yyy. format document
formatter
function
function(unixDate){return unixDate}
Main Input value formatter function
altField
string
null
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’
altFormat
string
‘unix’
The date format, combination of d, dd, m, mm, yy, yyy. format document
altFieldFormatter
function
function(unixDate){return unixDate}
Format value of alt field input input
minDate
Unix Offset
null
Set min date on datepicker, prevent user select date before given unix time
maxDate
Unix Offset
null
Set max date on datepicker, prevent user select date after given unix time
navigator
object
Navigator config object
navigator.enabled
boolean
true
Make navigator enable or disable
navigator.scroll
object
Navigate by scroll configuration
navigator.scroll.enabled
boolean
true
If you want prevent to navigate with mouse-wheel event make this option false
navigator.text
object
Navigator text config object
navigator.text.btnNextText
string
‘<'
Text of next button
navigator.text.btnPrevText
string
'>‘
Text of previews button
navigator.onNext
event
function (navigator) {}
Called when navigator goes to next state
navigator.onPrev
event
function (navigator) {}
Called when navigator goes to prev state
navigator.onSwitch
event
function (state) {}
Called when navigator switch
toolbox
object
Toolbox object options.
toolbox.enabled
boolean
true
Enable/Disable toolbox object
toolbox.text (DEPRECATED from 1.0.0)
object
toolbox.text.btnToday (DEPRECATED from 1.0.0)
string
‘امروز’
Today button text
toolbox.todayButton
object
Toolbox today button configuration
toolbox.todayButton.enabled
boolean
false
Make toolbox today button enable or disable
toolbox.todayButton.text
object
Today button text
toolbox.todayButton.text.fa
string
‘امروز’
Show when current calendar is Persian
toolbox.todayButton.text.en
string
‘Today’
Show when current calendar is Gregorian
toolbox.todayButton.onToday
event
function () {}
Called when today button clicked
toolbox.submitButton
object
Toolbox today button configuration
toolbox.submitButton.enabled
boolean
true
Make toolbox submit button enable or disable
toolbox.submitButton.text
object
Submit button text
toolbox.submitButton.text.fa
string
‘تایید’
Show when current calendar is Persian
toolbox.submitButton.text.en
string
‘submit’
Show when current calendar is Gregorian
toolbox.submitButton.onSubmit
event
function () {}
Called when submit button clicked
toolbox.calendarSwitch
object
toolbox.calendarSwitch.enabled
boolean
true
Make calendar switch enable or disable
toolbox.calendarSwitch.format
string
‘MMMM’
Calendar switch text format string
toolbox.calendarSwitch.onSwitch
event
function () {}
Called when calendar switch clicked
toolbox.onToday (DEPRECATED from 0.6.0)
event
function(toolbox){return unixDate}
Event called when today btn clicked
onlyTimePicker (mode)
boolean
false
If true, all pickers hide and just show timepicker
onlySelectOnDate
boolean
true
If true, date select just by click on day in month grid, and when user select month or year selected date doesnt change
checkDate
function
function (unix) { return true; }
Validate date access before render
checkMonth
function
function (month) { return true; }
Validate month access before render
checkYear
function
function (year) { return true; }
Validate year access before render
timePicker
object
timePicker.enabled
boolean
false
Make timePicker enable or disable
timePicker.step
int
1
The amount that increases or decreases by pressing the button
timePicker.hour
object
timePicker.hour.enabled
boolean
true
Enable/Disable hour in timepPicker object
timePicker.hour.step
int
null
The amount that increases or decreases hour, by pressing the button. overwrite by timepicker.step
timePicker.minute
object
timePicker.minute.enabled
boolean
true
Enable/Disable minute in timePicker object
timePicker.minute.step
int
null
The amount that increases or decreases minute, by pressing the button. overwrite by timepicker.step
timePicker.second
object
timePicker.second.enabled
boolean
true
Enable/Disable second in timePicker object
timePicker.second.step
int
null
The amount that increases or decreases second, by pressing the button. overwrite by timepicker.step
timePicker.meridian
object
timePicker.meridian.enabled
boolean
true
Enable/Disable meridian in timePicker object
dayPicker
object
dayPicker.enabled
boolean
true
Enable/Disable dayPicker object
dayPicker.titleFormat
string
‘YYYY MMMM’
DayPicker title format string
dayPicker.titleFormatter
function
function (year, month) {}
DayPicker title formatter function
dayPicker.onSelect
event
function (selectedDayUnix) {}
Called when date select by user
monthPicker
object
monthPicker.enabled
boolean
true
Enable/Disable monthPicker object
monthPicker.titleFormat
string
‘YYYY’
MonthPicker title format string
monthPicker.titleFormatter
function
function (unix) {}
MonthPicker title formatter function
monthPicker.onSelect
event
function (monthIndex) {}
Called when month select by user
yearPicker
object
yearPicker.enabled
boolean
true
Enable/Disable yearPicker object
yearPicker.titleFormat
string
‘YYYY’
YearPicker title format string
yearPicker.titleFormatter
function
function (year) {}
YearPicker title formatter function
yearPicker.onSelect
event
function (year) {}
Called when year select by user
onSelect
event
function (unixDate) {}
Called when date Select by user.
onSet
event
function (unixDate) {}
Called when date Select by api.
onShow
event
function () {}
Called when datePicker shown
onHide
event
function () {}
Called when datePicker hidden
onToggle
event
function () {}
Called when datePicker visibility toggle
onDestroy
event
function () {}
Called when datePicker destroyed
autoClose
boolean
false
If true datePicker close after select date
position
string
‘auto’
Position of datepicker element relative to input element, accept ‘auto’, [x,y]
observer
boolean
false
If true datepicker update self by user inputted date string, accept ‘yyyy/mm/dd’
inputDelay
int
800 (millisecond)
Time for last user key-down event, accept millisecond
template
string
null
By default datepicker have a template string, and you can overwrite it simply by replace string in config.
customWeekdays
object
customWeekdays.mode
string
“min”, “extended”, “custom”
customWeekdays.list
array
[‘?’, ‘?’, ‘?’, ‘?’, ‘?’, ‘?’, ‘?’]
If customWeekdays.mode == “custom”, then you can see your Custom Weekdays list in calendar
multiSelect
boolean
false
set true for multiple select mode
license
Freely distributable under the terms of the MIT license.