Star

Javascript calendar

A basic date and time picker using jsuites calendar.


Date picker as a webcomponent



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

<jsuites-calendar value="2020-01-20" format="DD/MM/YYYY"></jsuites-calendar>

<script>
document.querySelector('jsuites-calendar').addEventListener('onchange', function(e) {
    console.log('New value: ' + e.target.value);
});
document.querySelector('jsuites-calendar').addEventListener('onclose', function(e) {
    console.log('Calendar is closed');
});
</script>
</html>


Javascript calendar as plugin



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

<input id='calendar'>

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