"time spinner "
Bootstrap 3.3.0 Snippet by ashesh Vashi

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="time" class="input-group time pg-control editable"> <div class="input-group spinner editable HH double-digit" data-min="0" data-max="23" data-val="2"> <input type="number" class="form-control" placeholder="HH" min="0" max="23"/> <div class="input-group-btn-vertical"> <button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button> <button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button> </div> <div class="input-group-addon">:</div> </div> <div class="input-group spinner editable mm double-digit" data-min="0" data-max="59" data-val="2"> <input type="number" class="form-control" placeholder="MI" min="0" max="59"/> <div class="input-group-btn-vertical"> <button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button> <button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button> </div> <div class="input-group-addon">:</div> </div> <div class="input-group spinner editable SS double-digit" data-min="0" data-max="59" data-val="2"> <input type="number" class="form-control" placeholder="SS" min="0" max="59"/> <div class="input-group-btn-vertical"> <button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button> <button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button> </div> </div> </div> <div id="datetime" class="input-group datetime pg-control editable"> <div class="input-group spinner editable double-digit DD" data-min="1" data-max="31" data-val="2"> <input type="number" class="form-control" placeholder="DD" min="1" max="31"/> <div class="input-group-btn-vertical"> <button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button> <button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button> </div> <div class="input-group-addon">\</div> </div> <div class="input-group spinner editable double-digit MM" data-min="1" data-max="12" data-val="2"> <input type="number" class="form-control" placeholder="MM" min="1" max="12"/> <div class="input-group-btn-vertical"> <button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button> <button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button> </div> <div class="input-group-addon">\</div> </div> <div class="input-group spinner editable four-digit YY" data-min="0" data-max="9999" data-val="2016"> <input type="number" class="form-control" placeholder="YYYY" min="0" max="9999"/> <div class="input-group-btn-vertical"> <button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button> <button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button> </div> </div> <div class="input-group spinner editable HH double-digit" data-min="0" data-max="23" data-val="2"> <input type="number" class="form-control" placeholder="HH" min="0" max="23"/> <div class="input-group-btn-vertical"> <button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button> <button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button> </div> <div class="input-group-addon">:</div> </div> <div class="input-group spinner editable mm double-digit" data-min="0" data-max="59" data-val="2"> <input type="number" class="form-control" placeholder="MI" min="0" max="59"/> <div class="input-group-btn-vertical"> <button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button> <button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button> </div> <div class="input-group-addon">:</div> </div> <div class="input-group spinner editable SS double-digit" data-min="0" data-max="59" data-val="2"> <input type="number" class="form-control" placeholder="SS" min="0" max="59"/> <div class="input-group-btn-vertical"> <button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button> <button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button> </div> </div> </div> <div id="date" class="input-group date pg-control editable"> <div class="input-group spinner editable double-digit DD" data-min="1" data-max="31" data-val="2"> <input type="number" class="form-control" placeholder="DD" min="1" max="31"/> <div class="input-group-btn-vertical"> <button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button> <button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button> </div> <div class="input-group-addon">:</div> </div> <div class="input-group spinner editable double-digit MM" data-min="1" data-max="12" data-val="2"> <input type="number" class="form-control" placeholder="MM" min="1" max="12"/> <div class="input-group-btn-vertical"> <button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button> <button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button> </div> <div class="input-group-addon">:</div> </div> <div class="input-group spinner editable four-digit YY" data-min="0" data-max="9999" data-val="2016"> <input type="number" class="form-control" placeholder="YYYY" min="0" max="9999"/> <div class="input-group-btn-vertical"> <button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button> <button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button> </div> </div> </div> <div id="time-readonly" class="input-group pg-control time"> <input class="form-control double-digit readonly HH" value="00" readonly/> <div class="input-group-addon">:</div> <input class="form-control double-digit readonly MI" value="00" readonly/> <div class="input-group-addon">:</div> <input class="form-control double-digit readonly SS" value="00" readonly/> </div> <div id="datetime-readonly" class="input-group pg-control datetime"> <input class="form-control double-digit readonly DD" value="01" readonly/> <div class="input-group-addon">\</div> <input class="form-control double-digit readonly MM" value="12" readonly/> <div class="input-group-addon">\</div> <input class="form-control four-digit readonly YY" value="1979" readonly/> <div class="input-group-addon"> </div> <input class="form-control double-digit readonly HH" value="00" readonly/> <div class="input-group-addon">:</div> <input class="form-control double-digit readonly MI" value="00" readonly/> <div class="input-group-addon">:</div> <input class="form-control double-digit readonly SS" value="00" readonly/> </div>
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css); .double-digit { max-width: 45px; } .four-digit { max-width: 66px; } .spinner > .input-group-btn-vertical > .btn:first-child { border-top-right-radius: 4px; border-bottom: 1px solid darkgray; } .spinner > .input-group-btn-vertical > .btn:last-child { border-bottom-right-radius: 4px; } .spinner > .form-control { padding: 4px 2px; height: 28px; text-align: left; border: none; border-color: transparent; bax-shadow: inset 0 1px 1px transparent; -webkit-box-shadow: inset 0 1px 1px transparent; -moz-box-shadow: inset 0 1px 1px transparent; } .spinner > .form-control:focus, .spinner > .form-control:focus, .spinner > .form-control:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); } .spinner > input[type=number]::-webkit-inner-spin-button, .spinner > input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .pg-control { margin: 10px; display: table; border: 1px solid darkgray; border-radius: 5px; } .time { width: 119px; } .date { width: 133px; } .datetime { width: 250px; } .pg-control > .form-control { padding: 4px 4px; } .pg-control > .spinner { display: table; float: left; } .pg-control .spinner > .input-group-btn-vertical { position: relative; white-space: nowrap; width: 15px; vertical-align: middle; display: none; border-left: 1.5px solid darkgray; } .pg-control .spinner > .input-group-btn-vertical:last-child { display: table-cell; visibility: hidden; } .pg-control .spinner > .input-group-btn-vertical > .btn { display: block; float: none; width: 100%; max-width: 100%; padding: 6px 0px; margin-left: 0px; position: relative; border-radius: 0; height: 14px; } .pg-control .spinner:not(:last-child) > .input-group-btn-vertical > .btn:first-child { border-top-right-radius: 0px; } .pg-control .spinner:not(:last-child) > .input-group-btn-vertical > .btn:last-child { border-bottom-right-radius: 0px; } .pg-control .spinner > .input-group-btn-vertical i { position: absolute; top: 0; left: 2px; } .pg-control .input-group-addon { padding: 0px 0px 2px 0px; width: 15px; height: 28px; line-height: 13px; background-color: transparent; border-color: transparent; font-weight: bold; font-size: x-large; display: table-cell; text-align: center; } .pg-control:not(.editable) .spinner > .input-group-addon { width: 0; } .pg-control.editable .spinner > .input-group-add { width: 15px; } .pg-control.editable.active spinner > .input-group-btn-vertical { display: table-cell; visibility: visible; } .pg-control.active .spinner > .input-group-btn-vertical { display: table-cell; visibility: visible; } .pg-control.active .spinner > .input-group-addon { display: none; } .pg-control > .form-control.readonly { border: none; background-color: inherit; height: 28px; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; }
$(function() { function loadScript(url, callback) { // Adding the script tag to the head as suggested before var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; // Then bind the event to the callback function. // There are several events for cross browser compatibility. script.onreadystatechange = callback; script.onload = callback; // Fire the loading head.appendChild(script); } loadScript('https://amiliaapp.github.io/backform/3rd/underscore.js', function() { loadScript('https://amiliaapp.github.io/backform/3rd/backbone.js', function() { loadScript('https://amiliaapp.github.io/backform/src/backform.js', function() { // Spinner PUBLIC CLASS DEFINITION // ============================== var Spinner = function (el, options) { this.$el = $(el); this.editable = this.$el.hasClass('editable'); this.$input = this.$el.find('input').first(); this.options = $.extend({}, Spinner.DEFAULTS, options); this.max = this.$el.data('max'); this.min = this.$el.data('min'); this.def = this.$el.data('default'); this.val = this.$el.data('value') || this.def; this.val = isNaN(this.val) ? 0 : this.val; this.$input.val(this.val); this.active = this.$el.data('active') || 0; } Spinner.DEFAULTS = {}; Spinner.prototype.increment = function (direction, by) { if (!this.editable) return false; by = by || 1; if (direction == 1) { if (!_.isNaN(this.max) && this.val >= this.max) { this.val = _.isNaN(this.min) ? 0 : this.min; this.val += (by - 1); } else { this.val += by; } } else if (direction == -1) { if (!_.isNaN(this.min) && this.val <= this.min) { this.val = _.isNaN(this.max) ? Number.MAX_SAFE_INTEGER : this.max; this.val -= (by - 1); } else { this.val -= by; } } this.$input.val(this.val); return true; } // Spinner plug definition // ======================== function SpinnerPlugin() { var args = Array.prototype.slice.call(arguments); var op = args.length && args.shift(); return this.each(function () { var $this = $(this), data = $this.data('pgSpinner'), options = typeof option == 'object' && option; if (!data) $this.data('pgSpinner', (data = new Spinner(this, options))); switch (op) { case 'increment': data.increment.apply(data, args); break; case 'activate': data.activate.apply(data, args); break; } }) } $.fn.pgSpinner = SpinnerPlugin; $.fn.pgSpinner.Constructor = Spinner; // Spinner DATA-API // ================ $(document) .on('click', '.spinner button.btn-up', function (ev) { var $spinner = $(ev.target).closest('.spinner'); SpinnerPlugin.call($spinner, 'increment', 1); }) .on('click', '.spinner button.btn-down', function (ev) { var $spinner = $(ev.target).closest('.spinner'); SpinnerPlugin.call($spinner, 'increment', -1); }) .on('focus', '.spinner'); var node = document.createElement('div'); function mouseWheelHandler(e) { var normalize_mousewheel = function(e) { var o = e && e.originalEvent || e, d = o.detail, w = o.wheelDelta, n = 300, n1 = n-1; // Normalize delta d = d ? w && (f = w/d) ? d/f : -d/1.35 : w/120; // Quadratic scale if |d| > 1 d = d < 1 ? d < -1 ? (-Math.pow(d, 2) - n1) / n : d : (Math.pow(d, 2) + n1) / n; // Delta *should* not be greater than 2... e.delta = Math.min(Math.max(d / 2, -1), 1); } var el = e.target; if (el) { var $spinner = $(el).closest('.spinner'), wheelDelta = $spinner.data('wheelDelta') || 0; normalize_mousewheel(e); wheelDelta += e.delta; if (wheelDelta > 1 || wheelDelta < -1) { var incrementBy = parseInt(wheelDelta, 10), dir = wheelDelta > 1 ? 1 : -1; if (dir === 1) { wheelDelta -= incrementBy; } else { incrementBy = incrementBy * -1; wheelDelta += incrementBy; } SpinnerPlugin.call($spinner, 'increment', dir, incrementBy); } $spinner.data('wheelDelta', wheelDelta); e.preventDefault(); } } if ('onmousewheel' in node) { var onMouseWheel = function(ev) { ev = ev || window.event; mouseWheelHandler(ev); }; $(document).on('mousewheel', '.spinner', onMouseWheel); $(document).on('mousewheel', '.spinner button.btn', onMouseWheel); $(document).on('mousewheel', '.spinner input.form-control', onMouseWheel); } else { $(document).on('DOMMouseScroll', '.spinner input.form-control', mouseWheelHandler); $(document).on('mousewheel', '.spinner button.btn', onMouseWheel); $(document).on('mousewheel', '.spinner', onMouseWheel); } delete node; var pgControl = function (el, options) { this.$el = $(el); this.editable = this.$el.hasClass('editable'); this.active = 0; } pgControl.prototype.activate = function () { if (!this.editable) return; this.active++; if (!this.$el.hasClass('active')) this.$el.addClass('active'); } pgControl.prototype.deactivate = function() { if (!this.editable) return; var self = this; setTimeout( function() { self.active--; if (self.active <= 0 && self.$el.hasClass('active')) { self.active = 0; self.$el.removeClass('active'); } }, 200 ); } pgControl.prototype.mouseOver = function() { if (!this.editable) return; if (!this.$el.hasClass('active')) this.$el.addClass('active'); } pgControl.prototype.mouseLeave = function() { if (!this.editable) return; var self = this; setTimeout( function() { if (self.active <= 0 && self.$el.hasClass('active')) { self.$el.removeClass('active'); } }, 200 ); } // pgControl plugin definition // ======================== function pgControlPlugin() { var args = Array.prototype.slice.call(arguments); var op = args.length && args.shift(); return this.each(function () { var $this = $(this), data = $this.data('pgControl'), options = typeof option == 'object' && option; if (!data) $this.data('pgControl', (data = new pgControl(this, options))); if (op in pgControl.prototype) { op = pgControl.prototype[op]; op.apply(data, args); } }); } $.fn.pgControl = pgControlPlugin; $.fn.pgControl.Constructor = pgControl; // pgControl DATA-API // ================ var activateFunc = function(ev) { var $el = $(ev.target).closest('.pg-control'); pgControlPlugin.call($el, 'activate'); }, deactivateFunc = function(ev) { var $el = $(ev.target).closest('.pg-control'); pgControlPlugin.call($el, 'deactivate'); }, onMouseOver = function(ev) { var $el = $(ev.target).closest('.pg-control'); pgControlPlugin.call($el, 'mouseOver'); }, onMouseLeave = function(ev) { var $el = $(ev.target).closest('.pg-control'); pgControlPlugin.call($el, 'mouseLeave'); }; $(document) .on('focus', '.pg-control.editable input', activateFunc) .on('focus', '.pg-control.editable button', activateFunc) .on('blur', '.pg-control.editable input', deactivateFunc) .on('blur', '.pg-control.editable button', deactivateFunc) .on('mouseover mouseenter', '.pg-control.editable', onMouseOver) .on('mouseleave', '.pg-control.editable', onMouseLeave) }); }); }); });

Related: See More


Questions / Comments: