Angular Bootstrap UI Timepicker entering invalid time - angular-ui-bootstrap

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
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()">
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