timepicker testing
HTML
<span id="results"></span><br/>
<input type="text" id="timepick">
CSS
.ui-timepicker-wrapper {
overflow-y: auto;
height: 150px;
width: 6.5em;
background: #fff;
border: 1px solid #ddd;
-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
box-shadow:0 5px 10px rgba(0,0,0,0.2);
outline: none;
z-index: 10001;
margin: 0;
}
.ui-timepicker-wrapper.ui-timepicker-with-duration {
width: 11em;
}
.ui-timepicker-list {
margin: 0;
padding: 0;
list-style: none;
}
.ui-timepicker-duration {
margin-left: 5px; color: #888;
}
.ui-timepicker-list:hover .ui-timepicker-duration {
color: #888;
}
.ui-timepicker-list li {
padding: 3px 0 3px 5px;
cursor: pointer;
white-space: nowrap;
color: #000;
list-style: none;
margin: 0;
}
.ui-timepicker-list:hover .ui-timepicker-selected {
background: #fff; color: #000;
}
li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
background: #1980EC; color: #fff;
}
li.ui-timepicker-selected .ui-timepicker-duration,
.ui-timepicker-list li:hover .ui-timepicker-duration {
color: #ccc;
}
.ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
color: #888;
cursor: default;
}
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
background: #f2f2f2;
}
JavaScript
/************************
jquery-timepicker v1.2.12
http://jonthornton.github.com/jquery-timepicker/
requires jQuery 1.7+
************************/
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
var _baseDate = _generateBaseDate();
var _ONE_DAY = 86400;
var _defaults = {
className: null,
minTime: null,
maxTime: null,
durationTime: null,
step: 60,
showDuration: false,
timeFormat: 'g:ia',
scrollDefaultNow: false,
scrollDefaultTime: false,
selectOnBlur: false,
disableTouchKeyboard: false,
forceRoundTime: false,
appendTo: 'body',
disableTimeRanges: [],
closeOnWindowScroll: false,
disableTextInput: false,
typeaheadHighlight: true
};
var _lang = {
decimal: '.',
mins: 'mins',
hr: 'hr',
hrs: 'hrs'
};
var methods =
{
init: function(options)
{
return this.each(function()
{
var self = $(this);
// convert dropdowns to text input
if (self[0].tagName == 'SELECT') {
var attrs = { 'type': 'text', 'value': self.val() };
var raw_attrs = self[0].attributes;
for (var i=0; i < raw_attrs.length; i++) {
attrs[raw_attrs[i].nodeName] = raw_attrs[i].nodeValue;
}
var input = $('<input />', attrs);
self.replaceWith(input);
self = input;
}
var settings = $.extend({}, _defaults);
if (options) {
settings = $.extend(settings, options);
}
if (settings.lang) {
_lang = $.extend(_lang, settings.lang);
}
settings = _parseSettings(settings);
self.data('timepicker-settings', settings);
self.prop('autocomplete', 'off');
self.on('click.timepicker focus.timepicker', methods.show);
self.on('change.timepicker', _formatValue);
self.on('keydown.timepicker', _keydownhandler);
self.on('keyup.timepicker',...