Question

我正在使用Angular Bootstrap UI Timepicker，如果我在小时字段中输入 50 ，它会突出显示红色字段，但不过我会收到一个有效的日期看起来就像 Tue Nov 15 2016 05:00:55 GMT+0100 。

任何想法我能做什么？谢谢！

Answer 1

就此而言，您可以考虑限制小时和分钟输入值，以下是Timepicker

的自定义方式

1）引入自定义模板，并指定min和max输入的validate-value，hour和minute属性元素，例如：

<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）实现validate-value指令以限制input元素中的数值：

.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

Angular Bootstrap UI Timepicker输入无效时间

1 个答案: