Add seconds to time editor.

js/jquery/timepicker.js

@@ -22,6 +22,7 @@ $.extend($.datepicker._defaults, {
 		 'dateFormat': 'yy-mm-dd',
 		 'changeMonth': true,
 		'changeYear': true,
+    'stepSeconds': 1, // Number of seconds to step up/down
     'stepMinutes': 1, // Number of minutes to step up/down
     'stepHours': 1, // Number of hours to step up/down
     'time24h': false, // True if 24h time
@@ -186,9 +187,11 @@ Timepicker.prototype = {
         this._orgValue  = null;
         this._orgHour   = null;
         this._orgMinute = null;
+        this._orgSecond = null;
         this._colonPos  = -1;
+        this._scolonPos  = -1;
         this._visible   = false;
-        this.tpDiv      = $('<div id="' + this._mainDivId + '" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible" style="width: 100px; display: none; position: absolute;"></div>');
+        this.tpDiv      = $('<div id="' + this._mainDivId + '" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible" style="width: 170px; display: none; position: absolute;"></div>');
         this._generateHtml();
     },
 
@@ -200,9 +203,11 @@ Timepicker.prototype = {
         this._time24h = $.datepicker._get(inst, 'time24h');
         this._altTimeField = $.datepicker._get(inst, 'altTimeField');
 
+        var stepSeconds = parseInt($.datepicker._get(inst, 'stepSeconds'), 10) || 1;
         var stepMinutes = parseInt($.datepicker._get(inst, 'stepMinutes'), 10) || 1;
         var stepHours   = parseInt($.datepicker._get(inst, 'stepHours'), 10)   || 1;
 
+        if (60 % stepSeconds != 0) { stepSeconds = 1; }
         if (60 % stepMinutes != 0) { stepMinutes = 1; }
         if (24 % stepHours != 0)   { stepHours   = 1; }
 
@@ -212,6 +217,9 @@ Timepicker.prototype = {
         $('#minuteSlider').slider('option', 'max', 60 - stepMinutes);
         $('#minuteSlider').slider('option', 'step', stepMinutes);
 
+        $('#secondSlider').slider('option', 'max', 60 - stepSeconds);
+        $('#secondSlider').slider('option', 'step', stepSeconds);
+
         this._inputId = input.id;
 
         if (!this._visible) {
@@ -241,7 +249,10 @@ Timepicker.prototype = {
     {
         var curTime = $('#' + this._mainDivId + ' span.fragHours').text()
                     + ':'
-                    + $('#' + this._mainDivId + ' span.fragMinutes').text();
+                    + $('#' + this._mainDivId + ' span.fragMinutes').text()
+                    + ':'
+                    + $('#' + this._mainDivId + ' span.fragSeconds').text()
+                    ;
 
         if (!this._time24h) {
             curTime += ' ' + $('#' + this._mainDivId + ' span.fragAmpm').text();
@@ -279,6 +290,7 @@ Timepicker.prototype = {
 
         $('#hourSlider').css('height',   this.tpDiv.height() - (3.5 * hdrHeight));
         $('#minuteSlider').css('height', this.tpDiv.height() - (3.5 * hdrHeight));
+        $('#secondSlider').css('height', this.tpDiv.height() - (3.5 * hdrHeight));
     },
 
     _generateHtml: function ()
@@ -287,9 +299,9 @@ Timepicker.prototype = {
 
         html += '<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">';
         html += '<div class="ui-datepicker-title" style="margin:0">';
-        html += '<span class="fragHours">08</span><span class="delim">:</span><span class="fragMinutes">45</span> <span class="fragAmpm"></span></div></div><table>';
+        html += '<span class="fragHours">08</span><span class="delim">:</span><span class="fragMinutes">45</span>:</span><span class="fragSeconds">45</span> <span class="fragAmpm"></span></div></div><table>';
-        html += '<tr><th>Hour</th><th>Minute</th></tr>';
+        html += '<tr><th>Hour</th><th>Minute</th><th>Second</th></tr>';
-        html += '<tr><td align="center"><div id="hourSlider" class="slider"></div></td><td align="center"><div id="minuteSlider" class="slider"></div></td></tr>';
+        html += '<tr><td align="center"><div id="hourSlider" class="slider"></div></td><td align="center"><div id="minuteSlider" class="slider"></div></td><td align="center"><div id="secondSlider" class="slider"></div></td></tr>';
         html += '</table>';
 
         this.tpDiv.empty().append(html);
@@ -325,8 +337,23 @@ Timepicker.prototype = {
             }
         });
 
+        $('#secondSlider').slider({
+            orientation: "vertical",
+            range: 'min',
+            min: 0,
+            max: 59,
+            step: 1,
+            slide: function(event, ui) {
+                self._writeTime('second', ui.value);
+            },
+            stop: function(event, ui) {
+                $('#' + self._inputId).focus();
+            }
+        });
+
         $('#hourSlider > a').css('padding', 0);
         $('#minuteSlider > a').css('padding', 0);
+        $('#secondSlider > a').css('padding', 0);
     },
 
     _writeTime: function (type, value)
@@ -353,6 +380,11 @@ Timepicker.prototype = {
             if (value < 10) value = '0' + value;
             $('#' + this._mainDivId + ' span.fragMinutes').text(value);
         }
+
+        if (type == 'second') {
+            if (value < 10) value = '0' + value;
+            $('#' + this._mainDivId + ' span.fragSeconds').text(value);
+        }
     },
 
     _parseTime: function ()
@@ -361,12 +393,19 @@ Timepicker.prototype = {
 
         this._colonPos = dt.search(':');
 
-        var m = 0, h = 0, a = '';
+        var m = 0, h = 0, s = 0, a = '';
 
         if (this._colonPos != -1) {
+            this._scolonPos = dt.substring(this._colonPos + 1).search(':');
             h = parseInt(dt.substr(this._colonPos - 2, 2), 10);
             m = parseInt(dt.substr(this._colonPos + 1, 2), 10);
-            a = jQuery.trim(dt.substr(this._colonPos + 3, 3));
+            if (this._scolonPos != -1) {
+                this._scolonPos += this._colonPos + 1;
+                s = parseInt(dt.substr(this._scolonPos + 1, 2), 10);
+                a = jQuery.trim(dt.substr(this._scolonPos + 3, 3));
+            } else {
+                a = jQuery.trim(dt.substr(this._colonPos + 3, 3));
+            }
         }
 
         a = a.toLowerCase();
@@ -386,9 +425,11 @@ Timepicker.prototype = {
 
         this._setTime('hour',   h);
         this._setTime('minute', m);
+        this._setTime('second', s);
 
         this._orgHour   = h;
         this._orgMinute = m;
+        this._orgSecond = s;
     },
 
     _setTime: function (type, value)
@@ -397,6 +438,7 @@ Timepicker.prototype = {
         if (value < 0)    value = 0;
         if (value > 23 && type == 'hour')   value = 23;
         if (value > 59 && type == 'minute') value = 59;
+        if (value > 59 && type == 'second') value = 59;
 
         if (type == 'hour') {
             $('#hourSlider').slider('value', value);
@@ -406,6 +448,10 @@ Timepicker.prototype = {
             $('#minuteSlider').slider('value', value);
         }
 
+        if (type == 'second') {
+            $('#secondSlider').slider('value', value);
+        }
+
         this._writeTime(type, value);
     }
 };