09:40 7/6/26 JavaScript Calendar
menu
Documentation keyboard_arrow_right Javascript calendar
JavaScript Calendar
Note: Looking for enhanced
accessibility and advanced features?
Check out CalendarJS, our feature-
rich calendar component with
comprehensive ARIA support and
keyboard navigation. jSuites
Calendar is perfect for lightweight
implementations.
The jSuites Calendar is a lightweight
JavaScript Calendar plugin and web component crafted to facilitate the creation of calendar
components. It supports date selection, date pickers, and datetime pickers. Engineered for an
outstanding user experience, it ensures compatibility across various devices.
Framework Agnostic: Seamless integration with React, Angular, VueJS, and more.
Responsiveness: Optimized for mobile devices.
Functionality: Enables date and time selection.
Custom Views: Supports year-month only display.
Event Handling: Offers multiple events for straightforward integration.
Flexibility: Available as a JavaScript Plugin or Web Component.
Date Constraints: Allows for the definition of valid date ranges.
Localization: Supports international settings for global usability.
Documentation
[Link] 1/16
09:40 7/6/26 JavaScript Calendar
Install
npm install jsuites
Methods
Upon initializing a calendar instance, the following methods are available for programmatic
interaction:
Method Description
open() Opens the calendar picker, allowing user interaction.
Closes the calendar. If ignoreEvents is set to true, the onclose event will not be
close(ignoreEvents) triggered.
@param boolean ignoreEvents - Skips the onclose event.
getValue() Retrieves the currently selected date.
Sets a new date for the calendar.
setValue(newValue)
@param mixed newValue - The new date, formatted as YYYY-MM-DD HH:MM:SS.
reset() Clears the current selection, resetting the input value.
next() Advances the calendar to the next month.
prev() Moves the calendar back to the previous month.
Events
You can bind one of the following events to your calendar to seamlessly integrate it with your
application:
Method Description
onchange Fires a method when the calendar's value changes.
onupdate Invokes a method whenever any update occurs in the calendar picker.
[Link] 2/16
09:40 7/6/26 JavaScript Calendar
Method Description
onclose Activates a method once the calendar picker is closed.
onopen Initiates a method when the calendar picker is opened.
Initial Settings
Customize the behavior of the calendar with the following initial settings:
Property Description
Defines the picker type as either 'default' or 'year-month-picker'.
type: string
Default is 'default'.
validRange: [ date, Restricts date selection to a specified range. Default is null, allowing for
date ] unrestricted selection.
Sets the starting day of the week, with 0 being Sunday and 6 being
startingDay: number
Saturday. Default is 0 (Sunday).
format: string Sets the date format. Default format is 'YYYY-MM-DD'.
readonly: boolean If true, disables manual changes to the input field.
If true, opens the calendar with today's date when no default value is set.
today: boolean
Default is false.
time: boolean If true, includes a time picker in the calendar. Default is false.
resetButton: boolean If true, a reset button is displayed. Default is true.
placeholder: string Text displayed when the input field is empty.
Array containing short names of the months. Default is ['Jan', 'Feb',
months: array
'Mar', ...].
Array containing full names of the months. Default is ['January',
monthsFull: array
'February', ...].
Array containing names of the weekdays. Default is ['Sunday', 'Monday',
weekdays: array
...].
weekdays_short: array Array containing short names of the weekdays. Default is ['S', 'M', ...].
[Link] 3/16
09:40 7/6/26 JavaScript Calendar
Property Description
value: string Sets a default date.
If true, renders the calendar in fullscreen. Default is true for screens with a
fullscreen: boolean
width of 800px or less.
opened: boolean The calendar opens by default if set to true. Default is false.
textDone: string Sets the text of the 'Done' button.
textReset: string Sets the text of the 'Reset' button.
textUpdate: string Sets the text of the 'Update' button.
Helpers
Utilize the following static methods for general date and time operations:
Description
[Link](date: string, text: object)
Converts a date string into a user-friendly time lapse from the current date.
[Link]()
Retrieves all dates on a page with the class .prettydate and prettifies them.
[Link]()
Returns the current date as a string.
[Link](date: string|object) => number
Converts a date string or object into an Excel-like number (e.g., 45134).
[Link](date: number) => string
Converts an Excel-like number into a date string.
[Link](date: string, format: string) => string
Attempts to convert a formatted date string into an ISO date string based on the provided format.
[Link](date: string, format: string)
Converts an ISO date string or date object into a formatted string.
[Link] 4/16
09:40 7/6/26 JavaScript Calendar
Format
The format consists of a versatile set of tokens that define the representation of dates and
times. Here are a few examples of combination of tokens you can utilize:
Token Description
DAY Represents the day of the week (e.g., Monday).
WD Represents the abbreviated day of the week (e.g., Mon).
DDDD Represents the full name of the day of the week (e.g., Monday).
DDD Represents the abbreviated name of the day of the week (e.g., Mon).
DD Represents the two-digit day of the month (e.g., 05).
D Represents the day of the month (e.g., 5).
Q Represents the quarter of the year (e.g., Q1).
HH24 Represents the hour in 24-hour format (e.g., 13 for 1 PM).
HH12 Represents the hour in 12-hour format (e.g., 01 for 1 AM/PM).
HH Represents the two-digit hour (e.g., 01 or 13).
H Represents the hour (e.g., 1 or 13).
AM\PM Represents the AM/PM indicator.
MI Represents the two-digit minute (e.g., 07).
SS Represents the two-digit second (e.g., 42).
MS Represents the milliseconds (e.g., 345).
YYYY Represents the four-digit year (e.g., 2022).
YYY Represents the three-digit year (e.g., 022).
YY Represents the two-digit year (e.g., 22).
Y Represents the year (e.g., 2022).
MONTH Represents the full name of the month (e.g., January).
MON Represents the abbreviated name of the month (e.g., Jan).
MMMMM Represents the abbreviated name of the month (e.g., Jan).
[Link] 5/16
09:40 7/6/26 JavaScript Calendar
Token Description
MMMM Represents the full name of the month (e.g., January).
MMM Represents the abbreviated name of the month (e.g., Jan).
MM Represents the two-digit month (e.g., 01).
M Represents the month (e.g., 1).
Format examples
mm/dd/yyyy
dd/mm/yyyy
d/m/y
hh:mm:ss
d/m/h h:m:s
Examples
Basic Date Picker
Create a simple date picker with default settings:
Select a date
[Link] 6/16
09:40 7/6/26 JavaScript Calendar
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<input id='calendar' />
<script>
[Link]([Link]('calendar'), {
format: 'DD/MM/YYYY',
placeholder: 'Select a date'
});
</script>
</html>
DateTime Picker
Implement a responsive date and time input with a calendar picker. This tool enables users to
select dates and times according to a specified format and monitors events triggered by
changes.
getValue()
[Link] 7/16
09:40 7/6/26 JavaScript Calendar
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<input id='calendar' />
<input type="button" value="getValue()" id="btn1" />
<script>
let instance = [Link]([Link]('calendar'), {
format: 'DD/MM/YYYY HH:MM',
time: true,
onchange: function() {
[Link](arguments)
}
});
[Link]('btn1').addEventListener('click', function() {
alert([Link]());
});
</script>
</html>
Embedding a Calendar in Your Application
Incorporate a calendar picker with customizable actions to streamline date and time selection
while enabling automated programmatic responses.
[Link] 8/16
09:40 7/6/26 JavaScript Calendar
Jun 2026
S M T W T F S
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
getValue()
[Link] 9/16
09:40 7/6/26 JavaScript Calendar
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<div id='calendar'></div>
<input type="button" value="getValue()" id="btn2"/>
<script>
let instance = [Link]([Link]('calendar'), {
format: 'DD/MM/YYYY HH:MM',
onupdate: function() {
[Link](arguments)
}
});
[Link]('btn2').addEventListener('click', function() {
alert([Link]());
})
</script>
</html>
Date Picker Web Component
Explore utilizing the jSuites calendar as a calendar picker web component and binding
JavaScript events for enhanced functionality.
2020-01-20
[Link] 10/16
09:40 7/6/26 JavaScript Calendar
<html>
<script src="[Link]
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<jsuites-calendar value="2020-01-20"></jsuites-calendar>
<script>
[Link]('jsuites-calendar').addEventListener('onchange',
function(e) {
[Link]('New value: ' + [Link]);
});
[Link]('jsuites-calendar').addEventListener('onclose',
function(e) {
[Link]('Calendar is closed');
});
</script>
</html>
Calendar with Date Range Restriction
Restrict date selection to a specific range:
Select a date in 2024
[Link] 11/16
09:40 7/6/26 JavaScript Calendar
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<input id='calendar' />
<script>
[Link]([Link]('calendar'), {
format: 'DD/MM/YYYY',
validRange: ['2024-01-01', '2024-12-31'],
placeholder: 'Select a date in 2024'
});
</script>
</html>
Year-Month Picker
Create a calendar that only allows year and month selection:
Select month and year
[Link] 12/16
09:40 7/6/26 JavaScript Calendar
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<input id='calendar' />
<script>
[Link]([Link]('calendar'), {
type: 'year-month-picker',
format: 'MMM/YYYY',
placeholder: 'Select month and year'
});
</script>
</html>
Calendar with Custom Format
Implement a calendar with a custom date format:
Sat, 15 June 2024
[Link] 13/16
09:40 7/6/26 JavaScript Calendar
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<input id='calendar' />
<script>
[Link]([Link]('calendar'), {
format: 'DDD, DD MMMM YYYY',
value: '2024-06-15'
});
</script>
</html>
Calendar with Event Handling
Implement comprehensive event handlers to respond to calendar interactions:
15/06/2024
Changed from: null to: 2024-06-15
[Link] 14/16
09:40 7/6/26 JavaScript Calendar
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<input id='calendar' />
<div id="console" style="margin-top: 20px; padding: 10px; background:
#f5f5f5;"></div>
<script>
[Link]([Link]('calendar'), {
format: 'DD/MM/YYYY',
value: '2024-06-15',
onchange: function(el, currentValue, previousValue) {
[Link]('console').innerHTML =
'Changed from: ' + previousValue + ' to: ' + currentValue;
},
onopen: function(el) {
[Link]('Calendar opened');
},
onclose: function(el) {
[Link]('Calendar closed');
},
onupdate: function(el, value) {
[Link]('Calendar updated:', value);
}
});
</script>
</html>
More examples
Explore additional use cases for the jSuites JavaScript Calendar plugin:
Year and Month Selection
[Link] 15/16
09:40 7/6/26 JavaScript Calendar
JavaScript Calendar Events
Calendar Date Range Validations
International Settings
Responsive JavaScript Calendar
Reactive JavaScript Calendar
LemonadeJS Reactive JavaScript Calendar is free JavaScript Plugin that can create range
picker, has keyboard navigation and focus on the best user experience.
JavaScript Calendar with Date Range Picker
See Also
CalendarJS - Advanced Calendar Component
For applications requiring advanced features, CalendarJS offers:
Enhanced keyboard navigation with full ARIA support
Advanced date range selection with improved UX
Comprehensive validation options
Framework-agnostic with React/Vue/Angular support
Smaller bundle size (3.18KB gzipped)
Explore CalendarJS →
Related jSuites Components
jSuites Dropdown - Autocomplete and select components
jSuites Modal - Modal dialogs for custom date forms
jSuites Tabs - Organize calendar interfaces
[Link] 16/16