Permalink
Browse files

make tab keydown move to next input and make setTime idiot proof

Tab keydown was switching to the next hightlighted unit but this
doesn't really make sense when entering in the full time.

Also improved the setTime method.
You can now enter 5pm, 545p, 5:30:20a and it will format the time
properly.

fixes #152
fixes #117
fixes #129
  • Loading branch information...
jdewit committed Oct 7, 2013
1 parent da8a416 commit 0d3a1ef234a9cfab30ea308eda1c4c48abf0c70a
View
@@ -140,6 +140,14 @@
showInputs: false,
minuteStep: 5
});
+
+ setTimeout(function() {
+ $('#timeDisplay').text($('#timepicker1').val());
+ }, 100);
+
+ $('#timepicker1').on('changeTime.timepicker', function(e) {
+ $('#timeDisplay').text(e.time.value);
+ });
});
</script>
</body>
View
@@ -43,7 +43,7 @@ <h1>Installation</h1>
<hr>
<h1>Demos</h1>
<hr>
- <p>Default timepicker.</p>
+ <p>Default timepicker. Value = (<span id="timeDisplay"></span>)</p>
<div class="input-append bootstrap-timepicker">
<input id="timepicker1" class="input-small" type="text"/><span class="add-on"><i class="icon-time"></i></span>
</div>
View
@@ -86,7 +86,7 @@
},
blurElement: function() {
- this.highlightedUnit = undefined;
+ this.highlightedUnit = null;
this.updateFromElementVal();
},
@@ -157,27 +157,6 @@
elementKeydown: function(e) {
switch (e.keyCode) {
case 9: //tab
- this.updateFromElementVal();
-
- switch (this.highlightedUnit) {
- case 'hour':
- e.preventDefault();
- this.highlightNextUnit();
- break;
- case 'minute':
- if (this.showMeridian || this.showSeconds) {
- e.preventDefault();
- this.highlightNextUnit();
- }
- break;
- case 'second':
- if (this.showMeridian) {
- e.preventDefault();
- this.highlightNextUnit();
- }
- break;
- }
- break;
case 27: // escape
this.updateFromElementVal();
break;
@@ -237,7 +216,7 @@
},
formatTime: function(hour, minute, second, meridian) {
- hour = hour !== null ? (hour < 10 ? '0' + hour : hour) : '';
+ hour = hour !== null ? (hour < 10 && this.showMeridian === false ? '0' + hour : hour) : '';
minute = minute !== null ? (minute < 10 ? '0' + minute : minute) : '';
second = second !== null ? (second < 10 ? '0' + second : second) : '';
@@ -678,9 +657,6 @@
},
setTime: function(time) {
- var arr,
- timeArray;
-
if (!time) {
this.clear();
return;
@@ -704,50 +680,62 @@
}
}
} else {
- if (this.showMeridian) {
- arr = time.split(' ');
- timeArray = arr[0].split(':');
- this.meridian = arr[1];
+ //
+ var timeArray,
+ hour,
+ minute,
+ second = 0;
+
+ if (time.match(/p/i) !== null) {
+ this.meridian = 'PM';
} else {
- timeArray = time.split(':');
+ this.meridian = 'AM';
}
- this.hour = parseInt(timeArray[0], 10);
- this.minute = parseInt(timeArray[1], 10);
- this.second = parseInt(timeArray[2], 10);
+ time = time.replace(/[^0-9\:]/g, '');
- if (isNaN(this.hour)) {
- this.hour = 0;
+ timeArray = time.split(':');
+
+ hour = timeArray[0] ? timeArray[0].toString() : timeArray.toString();
+ minute = timeArray[1] ? timeArray[1].toString() : '';
+ second = timeArray[2] ? timeArray[2].toString() : '';
+
+ // idiot proofing
+ if (hour.length > 4) {
+ second = hour.substr(4, 2);
}
- if (isNaN(this.minute)) {
- this.minute = 0;
+ if (hour.length > 2) {
+ minute = hour.substr(2, 2);
+ hour = hour.substr(0, 2);
+ }
+ if (minute.length > 2) {
+ second = minute.substr(2, 2);
+ minute = minute.substr(0, 2);
}
+ if (second.length > 2) {
+ second = second.substr(2, 2);
+ }
+
+ this.hour = parseInt(hour, 10);
+ this.minute = parseInt(minute, 10);
+ this.second = parseInt(second, 10);
if (this.showMeridian) {
- if (this.hour > 12) {
- this.hour = 12;
- } else if (this.hour < 1) {
+ if (this.hour < 1 || this.hour > 12) {
this.hour = 12;
}
-
- if (this.meridian === 'am' || this.meridian === 'a') {
- this.meridian = 'AM';
- } else if (this.meridian === 'pm' || this.meridian === 'p') {
- this.meridian = 'PM';
- }
-
- if (this.meridian !== 'AM' && this.meridian !== 'PM') {
- this.meridian = 'AM';
- }
} else {
if (this.hour >= 24) {
this.hour = 23;
} else if (this.hour < 0) {
this.hour = 0;
}
+ if (this.hour < 13 && this.meridian === 'PM') {
+ this.hour = this.hour + 12;
+ }
}
- if (this.minute < 0) {
+ if (!this.minute || this.minute < 0) {
this.minute = 0;
} else if (this.minute >= 60) {
this.minute = 59;
@@ -838,11 +826,7 @@
},
updateFromElementVal: function() {
- var val = this.$element.val();
-
- if (val) {
- this.setTime(val);
- }
+ this.setTime(this.$element.val());
},
updateWidget: function() {
@@ -964,7 +948,6 @@
}
};
-
//TIMEPICKER PLUGIN DEFINITION
$.fn.timepicker = function(option) {
var args = Array.apply(null, arguments);
Oops, something went wrong.

0 comments on commit 0d3a1ef

Please sign in to comment.