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