jquery ui datetimer addon

Learn adding on the datetimer plugin.

by vaiism

HTML

<script src="https://raw.github.com/trentrichardson/jQuery-Timepicker-Addon/master/jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<input type="text" name="dateFrom" id="dateFrom"/>

CSS

/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

JavaScript

var $dateFrom = $('#dateFrom');
$dateFrom.datetimepicker();

/*
$dateFrom.datetimepicker({
    dateFormat: 'dd MM yy',
    timeFormat: 'HH:SS',
    onSelect: function(selectedDateTime) {
        
    }
});
$dateFrom.datetimepicker('setDate', new Date());
*/