A new version of the jSuites JavaScript Calendar plugin is available here.
jSuites Calendar v5
JavaScript Calendar Quick Reference
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 |
|---|---|
| onchange | Trigger a method when value is changed. onchange(DOMElement element, string currentValue, string previousValue) => void |
| onupdate | Trigger a method when any information change in the calendar picker. onupdate(DOMElement element, string value) => void |
| onclose | Trigger a method when the calendar is closed. onupdate(DOMElement element) => void |
| onopen | Trigger a method when the calendar is closed. onupdate(DOMElement element) => void |
Settings
Initialization options
| Property | Description |
|---|---|
| type: string | Picker type: default |
| validRange: [ date, date ] | Date selection would be disabled out of this range. Default: null |
| startingDay: number | Starting weekday - 0 for sunday, 6 for saturday. Default: 0 (Sunday) |
| format: string | Date format. Default: YYYY-MM-DD |
| readonly: boolean | Input will be disabled for manual changes. |
| today: boolean | If no value is default, open teh calendar on today as default. Default: false |
| time: boolean | Include a time picker on the calendar. Default: false |
| resetButton: boolean | Show reset button. Default: true |
| placeholder: string | Placeholder instructions |
| months: array | Month short names. Default: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] |
| monthsFull: array | Month short names. Default: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] |
| weekdays: array | Weekday names. Default: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'] |
| value: string | Default date. |
| fullscreen: boolean | Render in fullscreen. Default: true for screenWidth: 800px |
| opened: boolean | Calendar starts opened. Default: false. |
| textDone: string | Text of the 'Done' button |
| textReset: string | Text of the 'textReset' button |
| textUpdate: string | Text of the 'Update' button |
| controls: boolean | Show 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 |