Javascript date & datetime picker

A very lean and responsive javascript calendar, date and date time picker plugin. This plugin was created for the user keep the same codebase accross different devices. It brings full integration with other plugins, such as jExcel. And works great in any device dimensions.


1

Javascript calendar vanilla examples


Simple javascript calendar with date format

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

<div id="calendar1"></div>

<script>
jSuites.calendar(document.getElementById('calendar1'));
</script>
</html>

Javascript datetime picker

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

<div id="calendar1"></div>

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

Multiple options javascript calendar

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

<div id="calendar1"></div>

<script>
jSuites.calendar(document.getElementById('calendar3'), {
    time:true,
    format:'DD/MM/YYYY',
    placeholder:'DD/MM/YYYY',
    readonly:false,
    onclose:function() {
        alert('Calendar is closed now!');
    }
});
</script>
</html>

Responsive

Taylored to work with all screen sizes. The javascript calendar will automatically set this as true for screens lower than 800 pixels.

// EXAMPLE1 - Simple calendar 
<html>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<div id="calendar4"></div>

<script>
jSuites.calendar(document.getElementById('calendar4'), {
    placeholder:'DATE',
});
</script>
</html>


// EXAMPLE2 - Fullscreen is default for screen < 800, but you can force that for any screen.
<html>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<div id="calendar5"></div>

<script>
jSuites.calendar(document.getElementById('calendar5'), {
    fullscreen:true,
    format:'DD/MM/YYYY HH24:MI',
    placeholder:'DATE AND TIME',
    time:true,
});
</script>
</html>


2

Javascript calendar methods


open();Open the javascript date picker
close(ignoreEvents);Close the dropdown
@param int ignoreEvents - Do no execute onclose event
getValue();Get the current selected date
setValue(newValue);Set a new value for the javascript date and time picker
@param mixed newValue - New date should be set as YYYY-MM-DD HH:MM:SS
reset();Clear from the input


3

Events


onchangeTrigger a method when value is changed.
oncloseTrigger a method when the dropdown is closed.


4

Initialization options


options : {
    // Date format
    format:'DD/MM/YYYY',
    // Allow keyboard date entry
    readonly:0,
    // Today is default
    today:0,
    // Show timepicker
    time:0,
    // Show the reset button
    resetButton:true,
    // Placeholder
    placeholder:'',
    // Translations can be done here
    months:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    weekdays:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
    weekdays_short:['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    // Value
    value:null,
    // Events
    onclose:null,
    onchange:null,
    // Fullscreen (this is automatic set for screensize < 800)
    fullscreen:false,
};