JavaScript calendar

Quick reference

Consider the following example:

<script src=""></script>
<link rel="stylesheet" href="" type="text/css" />

<input id='calendar'>

var myCalendar = jSuites.calendar(document.getElementById('calendar'),{
    format: 'DD/MM/YYYY'


Method Description;Open the javascript date picker
myCalendar.close(ignoreEvents);Close the dropdown
@param int ignoreEvents - Do no execute onclose event
myCalendar.getValue();Get the current selected date
myCalendar.setValue(newValue);Set a new value for the javascript date and time picker
@param mixed newValue - New date should be set as YYYY-MM-DD HH:MM:SS
myCalendar.reset();Clear from the input;Next page
myCalendar.prev();Previous page


Method Description
onchangeTrigger a method when value is changed.
onupdateTrigger a method when any information change in the picker.
oncloseTrigger a method when the dropdown is closed.
onopenTrigger a method when the dropdown is closed.

Initialization options

Property Description
type: stringPicker type: default | year-month-picker. Default: default
validRange: [ date, date ]Date selection would be disabled out of this range. Default: null
startingDay: numberStarting weekday - 0 for sunday, 6 for saturday. Default: 0 (Sunday)
format: stringDate format. Default: YYYY-MM-DD
readonly: booleanInput will be disabled for manual changes.
today: booleanIf no value is default, open teh calendar on today as default. Default: false
time: booleanInclude a time picker on the calendar. Default: false
resetButton: booleanShow reset button. Default: true
placeholder: stringPlaceholder instructions
months: arrayMonth short names.
Default: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
monthsFull: arrayMonth short names.
Default: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
weekdays: arrayWeekday names.
Default: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']
weekdays_short: arrayWeekday short names.
Default: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
value: stringDefault date.
fullscreen: booleanRender in fullscreen. Default: true for screenWidth: 800px
opened: booleanCalendar starts opened. Default: false.
textDone: stringText of the 'Done' button
textReset: stringText of the 'textReset' button
textUpdate: stringText of the 'Update' button


Pattern Description
HH hour of day (01-12)
HH12 hour of day (01-12)
HH24 hour of day (00-23)
MI minute (00-59)
SS second (00-59)
MS millisecond
AM or PM meridiem indicator
YYYY year 4 digits of year
YYY last 3 digits of year
YY last 2 digits of year
Y last digit of year
MONTH full upper case month name
Month full capitalized month name
month full lower case month name
MON or MMM abbreviated upper case month name
Mon abbreviated capitalized month name
mon abbreviated lower case month name
MM month number (01-12)
DAY full upper case day name
Day full capitalized day name
day full lower case day name
DY abbreviated upper case day name
Dy abbreviated capitalized day name
dy abbreviated lower case day name
DD day of month (01-31)
D or WD day of the week starting on zero for Sunday
Q quarter