Angular Bootstrap UI Timepicker entering invalid time

Question

I'm using Angular Bootstrap UI Timepicker and if I enter 50 in the hours field, it highlights the field red, but nevertheless I get a valid date out of it that looks just like that Tue Nov 15 2016 05:00:55 GMT+0100.

Any ideas what I can do? Thanks!

Answer 1

For that matter you could consider to limit the hour and minute input values, here is how to customize it for Timepicker

1. introduce a custom template and specify the min, max and validate-value attributes for hour and minute input elements, for example:

<input type="text"  placeholder="HH" validate-value min="1" max="12" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-readonly="::readonlyInput" maxlength="2" tabindex="{{::tabindex}}" ng-disabled="noIncrementHours()" ng-blur="blur()">

2. implement validate-value directive to limit the number values in input element:

.directive('validateValue', function() {
   return {
       require: 'ngModel',
       link: function(scope, element, attrs, ngModelCtrl) {
            ngModelCtrl.$parsers.unshift(function(viewValue) {
                var min = Number(eval(attrs.min));
                var max = Number(eval(attrs.max));
                var value = Number(viewValue);
                var valid = (!isNaN(value) && value >= min && value <= max);

                if (!valid) { 
                    var currentValue = ngModelCtrl.$modelValue.toString();
                    ngModelCtrl.$setViewValue(currentValue);
                    ngModelCtrl.$render();
                    return currentValue;
                }
                else {
                    return viewValue;
                }
            });
      }
   };
})

Demo