Date and datetime javascript picker

A very lean and responsive javascript vanilla datepicker 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.


1

Javascript vanilla examples


Simple calendar with 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>

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

<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

Methods


open();Open the 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 date and time
@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,
};