Programmatically changes

Documentation

Available methods in the javascript calendar

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

Examples

The following example shows how to interact with the JavaScript calendar programmatically

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

<input type='button' value='Open the calendar' id="openbtn" />
<input type='button' value='Close the calendar' id="closebtn" />
<input type='button' value='Set value' id="setvaluebtn" />
<input type='button' value='Reset value' id="resetbtn" /><br>
<input id="calendar" />

<script>
let calendar = jSuites.calendar(document.getElementById('calendar'));

openbtn.onclick = () => calendar.open()
closebtn.onclick = () => calendar.close()
setvaluebtn.onclick = () => calendar.setValue('2020-01-01')
resetbtn.onclick = () => calendar.reset()
</script>


</html>