JavaScript calendar

Quick reference

Consider the following example:

<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<input id='calendar'>

<script>
var myCalendar = jSuites.calendar(document.getElementById('calendar'), {
    format: 'DD/MM/YYYY'
});
</script>
</html>


Methods

Method Description
calendar.open();Open the javascript calendar picker
calendar.close(ignoreEvents);Close the calendar
@param int ignoreEvents - Do no execute onclose event
calendar.getValue();Get the current selected date
calendar.setValue(newValue);Set a new value for the javascript calendar and time picker
@param mixed newValue - New date should be set as YYYY-MM-DD HH:MM:SS
calendar.reset();Reset the input value
calendar.next();Go to the next month
calendar.prev();Go to the previous month


Events

Method Description
onchangeTrigger a method when value is changed.
onchange(DOMElement element, string currentValue, string previousValue) => void
onupdateTrigger a method when any information change in the calendar picker.
onupdate(DOMElement element, string value) => void
oncloseTrigger a method when the calendar is closed.
onupdate(DOMElement element) => void
onopenTrigger a method when the calendar is closed.
onupdate(DOMElement element) => void


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']
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
controls: booleanShow the controls. Default: true


Tokens

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 meridian indicator
h:m AM/PM this format, with one or two h or m, is handled in a special way, referring to hours and minutes in the 12-hour system. If "AM/PM" is omitted, the 24-hour system is adopted
YYYY year 4 digits of year
YYY last 3 digits of year
YY last 2 digits of year
Y last digit of year
MMMMM First letter of month name
MMMM Full month name
MMM Abbreviated month name
MM or M month number (01-12)
MONTH Full upper case month name
Month Full capitalized month name
month Full lower case month name
MON Abbreviated upper case month name
Mon Abbreviated capitalized month name
mon Abbreviated lower case month name
DDDD Full day name
DDD Abbreviated day name
DD Day of month (01-31)
D Day of the week (starting on zero for Sundays)
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
WD Day of the week starting on zero for Sunday