timepicker: fluid typing, fluid stepping

This commit is contained in:
Felix Niklas 2015-06-30 13:52:33 +02:00
parent c186041348
commit 0236ed7396

View file

@ -9,6 +9,8 @@
* - template: false
* - showInputs: false
* - maxHours
* - automatically jump from hours to minutes when typing in a number
* - continue stepping from manually input value
*
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
@ -53,6 +55,7 @@
'focus.timepicker': $.proxy(this.highlightUnit, this),
'click.timepicker': $.proxy(this.highlightUnit, this),
'keydown.timepicker': $.proxy(this.elementKeydown, this),
'keyup.timepicker': $.proxy(this.elementKeyup, this),
'blur.timepicker': $.proxy(this.blurElement, this),
'mousewheel.timepicker DOMMouseScroll.timepicker': $.proxy(this.mousewheel, this)
});
@ -69,6 +72,7 @@
'focus.timepicker': $.proxy(this.highlightUnit, this),
'click.timepicker': $.proxy(this.highlightUnit, this),
'keydown.timepicker': $.proxy(this.elementKeydown, this),
'keyup.timepicker': $.proxy(this.elementKeyup, this),
'blur.timepicker': $.proxy(this.blurElement, this),
'mousewheel.timepicker DOMMouseScroll.timepicker': $.proxy(this.mousewheel, this)
});
@ -220,10 +224,33 @@
this.highlightMeridian();
break;
}
this.update();
break;
case 8: // backspace - ignore
break;
default:
// all other keys
// if cursor position is at the end of hour, jump to minute
switch (this.getCursorPosition()) {
case 1:
this.highlightMinute();
break;
case 3:
}
}
},
elementKeyup: function(e) {
var ignored = [
8, // backspace
9, // tab
27, // escape
37, 38, 39, 40 // arrows
]
if(ignored.indexOf(e.keyCode) == -1)
this.updateFromElementVal(true);
},
getCursorPosition: function() {
@ -436,61 +463,38 @@
}
},
highlightHour: function() {
var $element = this.$element.get(0),
self = this;
this.highlightedUnit = 'hour';
setSelectionRange: function(a, b) {
var $element = this.$element.get(0);
if ($element.setSelectionRange) {
setTimeout(function() {
$element.setSelectionRange(0,2);
$element.setSelectionRange(a, b);
}, 0);
}
},
highlightHour: function() {
this.highlightedUnit = 'hour';
this.setSelectionRange(0, 2);
},
highlightMinute: function() {
var $element = this.$element.get(0),
self = this;
this.highlightedUnit = 'minute';
if ($element.setSelectionRange) {
setTimeout(function() {
$element.setSelectionRange(3,5);
}, 0);
}
this.setSelectionRange(3, 5);
},
highlightSecond: function() {
var $element = this.$element.get(0),
self = this;
this.highlightedUnit = 'second';
if ($element.setSelectionRange) {
setTimeout(function() {
$element.setSelectionRange(6,8);
}, 0);
}
this.setSelectionRange(6,8);
},
highlightMeridian: function() {
var $element = this.$element.get(0),
self = this;
this.highlightedUnit = 'meridian';
if ($element.setSelectionRange) {
if (this.showSeconds) {
setTimeout(function() {
$element.setSelectionRange(9,11);
}, 0);
this.setSelectionRange(9,11);
} else {
setTimeout(function() {
$element.setSelectionRange(6,8);
}, 0);
}
this.setSelectionRange(6,8);
}
},
@ -718,7 +722,7 @@
}
},
setTime: function(time, ignoreWidget) {
setTime: function(time, ignoreWidget, silent) {
if (!time) {
this.clear();
return;
@ -831,7 +835,9 @@
this.second = second;
this.meridian = meridian;
if (!silent) {
this.update(ignoreWidget);
}
},
showWidget: function() {
@ -918,8 +924,8 @@
this.$element.val(this.getTime()).change();
},
updateFromElementVal: function() {
this.setTime(this.$element.val());
updateFromElementVal: function(silent) {
this.setTime(this.$element.val(), undefined, silent);
},
updateWidget: function() {