Home

Awesome

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

npm version Bower version Travis-ci

<a class="github-button" href="https://github.com/babakhani/pwt.datepicker" data-icon="octicon-star" data-style="mega" data-count-href="/babakhani/pwt.datepicker/stargazers" data-count-api="/repos/babakhani/pwt.datepicker#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star babakhani/pwt.datepicker on GitHub">Star</a> <a class="github-button" href="https://github.com/babakhani/pwt.datepicker/issues" data-icon="octicon-issue-opened" data-style="mega" data-count-api="/repos/babakhani/pwt.datepicker#open_issues_count" data-count-aria-label="# issues on GitHub" aria-label="Issue babakhani/pwt.datepicker on GitHub">Issue</a> <a class="github-button" href="https://github.com/babakhani/pwt.datepicker/fork" data-icon="octicon-repo-forked" data-style="mega" data-count-href="/babakhani/pwt.datepicker/network" data-count-api="/repos/babakhani/pwt.datepicker#forks_count" data-count-aria-label="# forks on GitHub" aria-label="Fork babakhani/pwt.datepicker on GitHub">Fork</a>

Table of content:

CDN

Dependency

persian-datepicker 1.x.x need persian-date 1.x.x

Install

npm install persian-datepicker

bower install persian-datepicker

Usage

<head>
  <link rel="stylesheet" href="css/persian.datepicker.css"/>
  <script src="js/jquery.js"></script>
  <script src="js/persian.date.js"></script>
  <script src="js/persian.datepicker.js"></script>
</head>

<script type="text/javascript">
  $(document).ready(function() {
    $(".example1").pDatepicker();
  });
</script>

<input type="text" class="example1" />

Options table

Options full document

nametypedefaultdescription
calendarTypestring'persian'Set default calendar mode of datepicker, available options: 'persian', 'gregorian'
calendarobjectCalendar type and localization configuration
calendar.persianobjectPersian calendar configuration
calendar.persian.localestring'fa'Set locale of Persian calendar available options: 'fa', 'en'
calendar.persian.showHintbooleanfalseIf set true, small date hint of this calendar will be shown on another calendar
calendar.persian.leapYearModestringalgorithmicPersian calendar leap year calculation mode, available options: 'algorithmic', 'astronomical'
calendar.gregorianobjectGregorian calendar configuration
calendar.gregorian.localestring'en'set locale of Gregorian calendar available options: 'fa', 'en'
calendar.gregorian.showHintbooleanfalseIf set true, small date hint of this calendar will be shown on another calendar
responsivebooleantrueIf set true make enable responsive view on mobile devices
initialValuebooleantrueIf set true datepicker init with input value date, use data-date property when you want set inline datepicker initial value
initialValueTypestring'gregorian'Initial value calendar type, accept: 'persian', 'gregorian'
inlinebooleanfalseIf set true datepicker render inline
persianDigit (DEPRECATED from 1.0.0)booleantrueIf set true all digit shows as persian digit
viewModestring'day'Accept 'day', 'month', 'year'
formatstring'LLLL'The date format, combination of d, dd, m, mm, yy, yyy. format document
formatterfunctionfunction(unixDate){return unixDate}Main Input value formatter function
altFieldstringnullAn 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'
altFormatstring'unix'The date format, combination of d, dd, m, mm, yy, yyy. format document
altFieldFormatterfunctionfunction(unixDate){return unixDate}Format value of alt field input input
minDateUnix OffsetnullSet min date on datepicker, prevent user select date before given unix time
maxDateUnix OffsetnullSet max date on datepicker, prevent user select date after given unix time
navigatorobjectNavigator config object
navigator.enabledbooleantrueMake navigator enable or disable
navigator.scrollobjectNavigate by scroll configuration
navigator.scroll.enabledbooleantrueIf you want prevent to navigate with mouse-wheel event make this option false
navigator.textobjectNavigator text config object
navigator.text.btnNextTextstring'<'Text of next button
navigator.text.btnPrevTextstring'>'Text of previews button
navigator.onNexteventfunction (navigator) {}Called when navigator goes to next state
navigator.onPreveventfunction (navigator) {}Called when navigator goes to prev state
navigator.onSwitcheventfunction (state) {}Called when navigator switch
toolboxobjectToolbox object options.
toolbox.enabledbooleantrueEnable/Disable toolbox object
toolbox.text (DEPRECATED from 1.0.0)object
toolbox.text.btnToday (DEPRECATED from 1.0.0)string'امروز'Today button text
toolbox.todayButtonobjectToolbox today button configuration
toolbox.todayButton.enabledbooleanfalseMake toolbox today button enable or disable
toolbox.todayButton.textobjectToday button text
toolbox.todayButton.text.fastring'امروز'Show when current calendar is Persian
toolbox.todayButton.text.enstring'Today'Show when current calendar is Gregorian
toolbox.todayButton.onTodayeventfunction () {}Called when today button clicked
toolbox.submitButtonobjectToolbox today button configuration
toolbox.submitButton.enabledbooleantrueMake toolbox submit button enable or disable
toolbox.submitButton.textobjectSubmit button text
toolbox.submitButton.text.fastring'تایید'Show when current calendar is Persian
toolbox.submitButton.text.enstring'submit'Show when current calendar is Gregorian
toolbox.submitButton.onSubmiteventfunction () {}Called when submit button clicked
toolbox.calendarSwitchobject
toolbox.calendarSwitch.enabledbooleantrueMake calendar switch enable or disable
toolbox.calendarSwitch.formatstring'MMMM'Calendar switch text format string
toolbox.calendarSwitch.onSwitcheventfunction () {}Called when calendar switch clicked
toolbox.onToday (DEPRECATED from 0.6.0)eventfunction(toolbox){return unixDate}Event called when today btn clicked
onlyTimePicker (mode)booleanfalseIf true, all pickers hide and just show timepicker
onlySelectOnDatebooleantrueIf true, date select just by click on day in month grid, and when user select month or year selected date doesnt change
checkDatefunctionfunction (unix) { return true; }Validate date access before render
checkMonthfunctionfunction (month) { return true; }Validate month access before render
checkYearfunctionfunction (year) { return true; }Validate year access before render
timePickerobject
timePicker.enabledbooleanfalseMake timePicker enable or disable
timePicker.stepint1The amount that increases or decreases by pressing the button
timePicker.hourobject
timePicker.hour.enabledbooleantrueEnable/Disable hour in timepPicker object
timePicker.hour.stepintnullThe amount that increases or decreases hour, by pressing the button. overwrite by timepicker.step
timePicker.minuteobject
timePicker.minute.enabledbooleantrueEnable/Disable minute in timePicker object
timePicker.minute.stepintnullThe amount that increases or decreases minute, by pressing the button. overwrite by timepicker.step
timePicker.secondobject
timePicker.second.enabledbooleantrueEnable/Disable second in timePicker object
timePicker.second.stepintnullThe amount that increases or decreases second, by pressing the button. overwrite by timepicker.step
timePicker.meridianobject
timePicker.meridian.enabledbooleantrueEnable/Disable meridian in timePicker object
dayPickerobject
dayPicker.enabledbooleantrueEnable/Disable dayPicker object
dayPicker.titleFormatstring'YYYY MMMM'DayPicker title format string
dayPicker.titleFormatterfunctionfunction (year, month) {}DayPicker title formatter function
dayPicker.onSelecteventfunction (selectedDayUnix) {}Called when date select by user
monthPickerobject
monthPicker.enabledbooleantrueEnable/Disable monthPicker object
monthPicker.titleFormatstring'YYYY'MonthPicker title format string
monthPicker.titleFormatterfunctionfunction (unix) {}MonthPicker title formatter function
monthPicker.onSelecteventfunction (monthIndex) {}Called when month select by user
yearPickerobject
yearPicker.enabledbooleantrueEnable/Disable yearPicker object
yearPicker.titleFormatstring'YYYY'YearPicker title format string
yearPicker.titleFormatterfunctionfunction (year) {}YearPicker title formatter function
yearPicker.onSelecteventfunction (year) {}Called when year select by user
onSelecteventfunction (unixDate) {}Called when date Select by user.
onSeteventfunction (unixDate) {}Called when date Select by api.
onShoweventfunction () {}Called when datePicker shown
onHideeventfunction () {}Called when datePicker hidden
onToggleeventfunction () {}Called when datePicker visibility toggle
onDestroyeventfunction () {}Called when datePicker destroyed
autoClosebooleanfalseIf true datePicker close after select date
positionstring'auto'Position of datepicker element relative to input element, accept 'auto', [x,y]
observerbooleanfalseIf true datepicker update self by user inputted date string, accept 'yyyy/mm/dd'
inputDelayint800 (millisecond)Time for last user key-down event, accept millisecond
templatestringnullBy default datepicker have a template string, and you can overwrite it simply by replace string in config.

license

Freely distributable under the terms of the MIT license.