now can change value in text inputs

dist/css/datepicker.css

@@ -414,11 +414,34 @@
   font-size: 12px; }
 
 .datepicker--time-current {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   font-size: 16px;
   -webkit-flex: 1;
       -ms-flex: 1;
           flex: 1;
   text-align: center; }
+  .datepicker--time-current input[type='text'] {
+    box-sizing: content-box;
+    border: none;
+    padding: 0 3px;
+    margin: 0;
+    outline: none;
+    box-shadow: none;
+    font-size: 16px;
+    width: 18px;
+    height: 23px; }
+  .datepicker--time-current > {
+    -webkit-flex: 1;
+        -ms-flex: 1;
+            flex: 1; }
 
 .datepicker--time-row {
   display: -webkit-flex;

dist/js/datepicker.js

@@ -182,9 +182,11 @@ var Datepicker;
 
         _bindEvents : function () {
             this.$el.on(this.opts.showEvent + '.adp', this._onShowEvent.bind(this));
+            this.$el.on('mouseup.adp', this._onMouseUpEl.bind(this));
             this.$el.on('blur.adp', this._onBlur.bind(this));
             this.$el.on('input.adp', this._onInput.bind(this));
             $(window).on('resize.adp', this._onResize.bind(this));
+            $('body').on('mouseup.adp', this._onMouseUpBody.bind(this));
         },
 
         _bindKeyboardEvents: function () {
@@ -950,11 +952,11 @@ var Datepicker;
 
         _onMouseUpDatepicker: function (e) {
             this.inFocus = false;
-            this.$el.focus()
+            e.originalEvent.inFocus = true;
+            if (!e.originalEvent.timepickerFocus) this.$el.focus();
         },
 
         _onInput: function () {
-            console.log(234);
             var val = this.$el.val();
 
             if (!val) {
@@ -968,6 +970,18 @@ var Datepicker;
             }
         },
 
+        _onMouseUpBody: function (e) {
+            if (e.originalEvent.inFocus) return;
+
+            if (this.visible && !this.inFocus) {
+                this.hide();
+            }
+        },
+
+        _onMouseUpEl: function (e) {
+            e.originalEvent.inFocus = true;
+        },
+
         _onKeyDown: function (e) {
             var code = e.which;
             this._registerKey(code);
@@ -1727,8 +1741,13 @@ var Datepicker;
         '      <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
         '   </div>' +
         '</div>' +
-        '<div class="datepicker--time-current">#{hourValue}:#{minValue}</div>' +
+        '<div class="datepicker--time-current">' +
-        '</div>';
+        '   <input type="text" value="#{hourValue}" placeholder="#{hourValue}" data-field="hours" name="hours-current" maxlength="2" data-max="#{hourMax}" data-action="next"/>' +
+        '   <span>:</span>' +
+        '   <input type="text" value="#{minValue}" placeholder="#{minValue}" data-field="minutes" name="minutes-current" maxlength="2" data-max="59" data-action="prev"/></div>' +
+        '</div>',
+        inputTimeout = 10;
+
     datepicker.Timepicker = function (inst, opts) {
         this.d = inst;
         this.opts = opts;
@@ -1736,6 +1755,8 @@ var Datepicker;
         var date = this.d.parsedDate;
         this.minutes = date.minutes;
         this.hours = date.hours;
+        this._minutes = date.minutes;
+        this._hours = date.hours;
 
         this.init();
     };
@@ -1750,6 +1771,11 @@ var Datepicker;
             }
 
             this.$ranges.on(input, this._onChangeRange.bind(this));
+            this.$currentInputs.on('mouseup', this._onMouseUpInput.bind(this));
+            this.$currentInputs.on('keydown', this._onKeyPressInput.bind(this));
+            this.$currentInputs.on('input', this._onInputInput.bind(this));
+            this.$currentInputs.on('blur', this._onBlurInput.bind(this));
+            this.$currentInputs.on('paste', this._onPasteInput.bind(this));
         },
 
         _buildHTML: function () {
@@ -1758,12 +1784,12 @@ var Datepicker;
                     hourMin: '00',
                     hourMax: '23',
                     hourStep: '1',
-                    hourValue: date.hours,
+                    hourValue: date.fullHours,
                     hourLabel: 'Часы',
                     minMin: '00',
                     minMax: '59',
                     minStep: '1',
-                    minValue: date.minutes,
+                    minValue: date.fullMinutes,
                     minLabel: 'Минуты'
                 },
                 _template = datepicker.template(template, data);
@@ -1771,6 +1797,9 @@ var Datepicker;
             this.$timepicker = $(_template).appendTo(this.d.$datepicker);
             this.$ranges = $('[type="range"]', this.$timepicker);
             this.$currentTime = $('.datepicker--time-current', this.$timepicker);
+            this.$currentInputs = $('input[type="text"]', this.$timepicker);
+            this.$hoursText = $('[name="hours-current"]', this.$timepicker);
+            this.$minutesText = $('[name="minutes-current"]', this.$timepicker);
         },
 
         _render: function () {
@@ -1781,7 +1810,9 @@ var Datepicker;
             var h = this.hours < 10 ? '0'+this.hours : this.hours,
                 m = this.minutes < 10 ? '0' + this.minutes : this.minutes,
                 html =  h + ':' + m;
-            this.$currentTime.html(html);
+
+            this.$hoursText.val(h);
+            this.$minutesText.val(m)
         },
 
         _onChangeRange: function (e) {
@@ -1792,6 +1823,103 @@ var Datepicker;
             this[name] = value;
             this._updateTime();
             this.d._trigger('timeChange', [this.hours, this.minutes])
+        },
+
+        _onMouseUpInput: function (e) {
+            e.originalEvent.inFocus = true;
+            e.originalEvent.timepickerFocus = true;
+        },
+
+        _onKeyPressInput: function (e) {
+            var $el = $(e.target),
+                field = $el.data('field'),
+                max = $el.data('max'),
+                _this = this,
+                charCode = e.which,
+                action = $el.data('action'),
+                parsedVal,
+                initialValue = $el.val(),
+                val = $el.val();
+
+            setTimeout(function () {
+                val = $el.val();
+                parsedVal = parseInt(val);
+
+                if (parsedVal > max) {
+                    $el.val(initialValue);
+                    return;
+                }
+
+                if (val.length == 2) {
+                    if (action == 'next' && charCode >= 48 && charCode <= 57) {
+                        _this.$minutesText.focus().select();
+                    }
+                }
+
+                if (!val.length) {
+                    if (action == 'prev' && charCode == 8) {
+                        _this.$hoursText.focus();
+
+                        _this.$hoursText[0].selectionStart = 2;
+                        _this.$hoursText[0].selectionEnd = 2;
+                    }
+                }
+
+
+            }, inputTimeout);
+
+            return charCode >= 48 && charCode <= 57
+            || (charCode >= 37 && charCode <= 40)
+            || (charCode >= 96 && charCode <= 105)
+            || charCode == 17
+            || charCode == 13
+            || charCode == 46
+            || charCode == 8
+            || charCode == 9;
+        },
+
+        _onInputInput: function (e) {
+            var $el = $(e.target),
+                _this = this,
+                field = $el.data('field'),
+                max = $el.data('max'),
+                val = parseInt($el.val());
+
+            setTimeout(function () {
+                val = parseInt($el.val());
+
+                if (val > max) {
+                    val = max;
+                    $el.val(val);
+                } else if (!val) {
+                    val = _this['_' + field]
+                }
+
+                _this[field] = val;
+                $('[name="' + field + '"]').val(val);
+                _this.d._trigger('timeChange',[_this.hours, _this.minutes])
+            }, inputTimeout)
+        },
+
+        _onBlurInput: function (e) {
+            var $el = $(e.target),
+                val = $el.val();
+
+            if (val.length == 1) {
+                val = '0' + val;
+                $el.val(val);
+            }
+        },
+
+        _onPasteInput: function (e) {
+            var $el = $(e.target),
+                val = $el.val(),
+                _this = this;
+
+            setTimeout(function () {
+                val = $el.val().replace(/\D/gi, '');
+                $el.val(val);
+            }, inputTimeout)
         }
     };
 })(window, jQuery, Datepicker);

src/js/datepicker.js

@@ -182,9 +182,11 @@ var Datepicker;
 
         _bindEvents : function () {
             this.$el.on(this.opts.showEvent + '.adp', this._onShowEvent.bind(this));
+            this.$el.on('mouseup.adp', this._onMouseUpEl.bind(this));
             this.$el.on('blur.adp', this._onBlur.bind(this));
             this.$el.on('input.adp', this._onInput.bind(this));
             $(window).on('resize.adp', this._onResize.bind(this));
+            $('body').on('mouseup.adp', this._onMouseUpBody.bind(this));
         },
 
         _bindKeyboardEvents: function () {
@@ -950,11 +952,11 @@ var Datepicker;
 
         _onMouseUpDatepicker: function (e) {
             this.inFocus = false;
-            this.$el.focus()
+            e.originalEvent.inFocus = true;
+            if (!e.originalEvent.timepickerFocus) this.$el.focus();
         },
 
         _onInput: function () {
-            console.log(234);
             var val = this.$el.val();
 
             if (!val) {
@@ -968,6 +970,18 @@ var Datepicker;
             }
         },
 
+        _onMouseUpBody: function (e) {
+            if (e.originalEvent.inFocus) return;
+
+            if (this.visible && !this.inFocus) {
+                this.hide();
+            }
+        },
+
+        _onMouseUpEl: function (e) {
+            e.originalEvent.inFocus = true;
+        },
+
         _onKeyDown: function (e) {
             var code = e.which;
             this._registerKey(code);

src/js/timepicker.js

@@ -10,8 +10,13 @@
         '      <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
         '   </div>' +
         '</div>' +
-        '<div class="datepicker--time-current">#{hourValue}:#{minValue}</div>' +
+        '<div class="datepicker--time-current">' +
-        '</div>';
+        '   <input type="text" value="#{hourValue}" placeholder="#{hourValue}" data-field="hours" name="hours-current" maxlength="2" data-max="#{hourMax}" data-action="next"/>' +
+        '   <span>:</span>' +
+        '   <input type="text" value="#{minValue}" placeholder="#{minValue}" data-field="minutes" name="minutes-current" maxlength="2" data-max="59" data-action="prev"/></div>' +
+        '</div>',
+        inputTimeout = 10;
+
     datepicker.Timepicker = function (inst, opts) {
         this.d = inst;
         this.opts = opts;
@@ -19,6 +24,8 @@
         var date = this.d.parsedDate;
         this.minutes = date.minutes;
         this.hours = date.hours;
+        this._minutes = date.minutes;
+        this._hours = date.hours;
 
         this.init();
     };
@@ -33,6 +40,11 @@
             }
 
             this.$ranges.on(input, this._onChangeRange.bind(this));
+            this.$currentInputs.on('mouseup', this._onMouseUpInput.bind(this));
+            this.$currentInputs.on('keydown', this._onKeyPressInput.bind(this));
+            this.$currentInputs.on('input', this._onInputInput.bind(this));
+            this.$currentInputs.on('blur', this._onBlurInput.bind(this));
+            this.$currentInputs.on('paste', this._onPasteInput.bind(this));
         },
 
         _buildHTML: function () {
@@ -41,12 +53,12 @@
                     hourMin: '00',
                     hourMax: '23',
                     hourStep: '1',
-                    hourValue: date.hours,
+                    hourValue: date.fullHours,
                     hourLabel: 'Часы',
                     minMin: '00',
                     minMax: '59',
                     minStep: '1',
-                    minValue: date.minutes,
+                    minValue: date.fullMinutes,
                     minLabel: 'Минуты'
                 },
                 _template = datepicker.template(template, data);
@@ -54,6 +66,9 @@
             this.$timepicker = $(_template).appendTo(this.d.$datepicker);
             this.$ranges = $('[type="range"]', this.$timepicker);
             this.$currentTime = $('.datepicker--time-current', this.$timepicker);
+            this.$currentInputs = $('input[type="text"]', this.$timepicker);
+            this.$hoursText = $('[name="hours-current"]', this.$timepicker);
+            this.$minutesText = $('[name="minutes-current"]', this.$timepicker);
         },
 
         _render: function () {
@@ -64,7 +79,9 @@
             var h = this.hours < 10 ? '0'+this.hours : this.hours,
                 m = this.minutes < 10 ? '0' + this.minutes : this.minutes,
                 html =  h + ':' + m;
-            this.$currentTime.html(html);
+
+            this.$hoursText.val(h);
+            this.$minutesText.val(m)
         },
 
         _onChangeRange: function (e) {
@@ -75,6 +92,103 @@
             this[name] = value;
             this._updateTime();
             this.d._trigger('timeChange', [this.hours, this.minutes])
+        },
+
+        _onMouseUpInput: function (e) {
+            e.originalEvent.inFocus = true;
+            e.originalEvent.timepickerFocus = true;
+        },
+
+        _onKeyPressInput: function (e) {
+            var $el = $(e.target),
+                field = $el.data('field'),
+                max = $el.data('max'),
+                _this = this,
+                charCode = e.which,
+                action = $el.data('action'),
+                parsedVal,
+                initialValue = $el.val(),
+                val = $el.val();
+
+            setTimeout(function () {
+                val = $el.val();
+                parsedVal = parseInt(val);
+
+                if (parsedVal > max) {
+                    $el.val(initialValue);
+                    return;
+                }
+
+                if (val.length == 2) {
+                    if (action == 'next' && charCode >= 48 && charCode <= 57) {
+                        _this.$minutesText.focus().select();
+                    }
+                }
+
+                if (!val.length) {
+                    if (action == 'prev' && charCode == 8) {
+                        _this.$hoursText.focus();
+
+                        _this.$hoursText[0].selectionStart = 2;
+                        _this.$hoursText[0].selectionEnd = 2;
+                    }
+                }
+
+
+            }, inputTimeout);
+
+            return charCode >= 48 && charCode <= 57
+            || (charCode >= 37 && charCode <= 40)
+            || (charCode >= 96 && charCode <= 105)
+            || charCode == 17
+            || charCode == 13
+            || charCode == 46
+            || charCode == 8
+            || charCode == 9;
+        },
+
+        _onInputInput: function (e) {
+            var $el = $(e.target),
+                _this = this,
+                field = $el.data('field'),
+                max = $el.data('max'),
+                val = parseInt($el.val());
+
+            setTimeout(function () {
+                val = parseInt($el.val());
+
+                if (val > max) {
+                    val = max;
+                    $el.val(val);
+                } else if (!val) {
+                    val = _this['_' + field]
+                }
+
+                _this[field] = val;
+                $('[name="' + field + '"]').val(val);
+                _this.d._trigger('timeChange',[_this.hours, _this.minutes])
+            }, inputTimeout)
+        },
+
+        _onBlurInput: function (e) {
+            var $el = $(e.target),
+                val = $el.val();
+
+            if (val.length == 1) {
+                val = '0' + val;
+                $el.val(val);
+            }
+        },
+
+        _onPasteInput: function (e) {
+            var $el = $(e.target),
+                val = $el.val(),
+                _this = this;
+
+            setTimeout(function () {
+                val = $el.val().replace(/\D/gi, '');
+                $el.val(val);
+            }, inputTimeout)
         }
     };
 })(window, jQuery, Datepicker);

src/sass/timepicker.scss

@@ -41,9 +41,28 @@ $rangeThumbBg: #dedede;
 }
 
 .datepicker--time-current {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: 16px;
   flex: 1;
   text-align: center;
+
+  input[type='text'] {
+    box-sizing: content-box;
+    border: none;
+    padding: 0 3px;
+    margin: 0;
+    outline: none;
+    box-shadow: none;
+    font-size: 16px;
+    width: 18px;
+    height: 23px;
+  }
+
+  > {
+    flex: 1;
+  }
 }
 
 .datepicker--time-row {