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>