M-persian-datepicker NPM

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

Table of content:

CDN

persian-date.js uncompressed | minified
persian-datepicker.js uncompressed | minified
persian-datepicker.css uncompressed | minified

Dependency

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

Install

npm install m-persian-datepicker

npm i m-persian-datepicker

Usage

<head>
  <link rel="stylesheet" href="css/m-persian-datepicker.css"/>
  <script src="js/jquery.js"></script>
  <script src="js/persian.date.js"></script>
  <script src="js/m-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

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