0

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

有什么想法我能做什么？谢谢！

4

1 回答 1

1

就此而言，您可以考虑限制小时和分钟输入值，这里是如何自定义它Timepicker

1) 引入自定义模板并指定min,max和validate-value属性hour和minuteinput 元素，例如：

<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指令以限制输入元素中的数值：

.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;
                }

            });
        }
    };
})

演示

于 2016-11-17T21:03:34.407 回答