Javascript calendar

The calendar can be used as a plugin or a web component. It offers a variety of options to customize your requirements.

Date picker as a web component

<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<script src="https://jsuites.net/v4/jsuites.webcomponents.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/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 a plugin

<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>
jSuites.calendar(document.getElementById('calendar'),{
    format: 'DD/MM/YYYY'
});
</script>
</html>

Embedded javascript calendar

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

<div id='calendar-2'></div>

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