Other plugins

  • jExcel CE
    The javascript spreadsheet

Calendar javascript plugin with date and datetime picker

A very lean and responsive javascript vanilla datepicker plugin. This plugin was created to be straight forward, simple, elegant and responsive. It brings full integration with other plugins, such as jExcel. The process of create a calendar element for the datepicker is described below.

The element should be an input and the options should an javascript object with none or more of the following options.

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>

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

Events

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

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,
};