Question

我有一个字段，它接受时间输入，如12:00 / 24:00 我希望以前只能填充数字和：在字段中和更改时使用适当的时间验证它。我想以棱角分明的方式做到这一点。我该怎么做。

这是我写的代码。这也可以在1指令中完成。这段代码可行，但不是更好的代码。

<input  type="text" ng-model-options="{allowInvalid: true}" ng-blur="validateHhMm(this)" ng-model='time' time-only/>


angular.module('abc').directive('timeOnly', function(){
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, modelCtrl) {

            modelCtrl.$parsers.push(function (inputValue) {
                var transformedInput = inputValue ? inputValue.replace(/[^\d:]/g,'') : null;

                if (transformedInput!=inputValue) {
                    modelCtrl.$setViewValue(transformedInput);
                    modelCtrl.$render();
                }

                return transformedInput;
            });
        }
    };
});


$scope.validateHhMm =  function (inputField)
    {
        var errorMsg = "";
        var regs = '';
        // regular expression to match required time format
        var re = /^(\d{1,2}):(\d{2})?$/;
        var inputvalue = $scope.time;
        if(inputvalue != '')
        {
            if(regs = inputvalue.match(re))
            {
            if(regs[4])
            {
                // 12-hour time format with am/pm
                if(regs[1] < 1 || regs[1] > 12)
                {
                    errorMsg = "Invalid value for hours: " + regs[1];
                }
            }
            else
            {
                if(regs[1] > 23)
                {
                    errorMsg = "Invalid value for hours: " + regs[1];
                }
            }
            if(!errorMsg && regs[2] > 59)
            {
                errorMsg = "Invalid value for minutes: " + regs[2];
            }
            }
            else
            {
                errorMsg = "Invalid time format: " + inputvalue;
            }
        }

        if(errorMsg != "")
        {
            //console.log(errorMsg);
            //field.focus();
            $scope.time = '';
            return false;
        }
        return true;
    };

Answer 1

试试这种方式

<input type="time" id="exampleInput" name="input" ng-model="example.value"
       placeholder="HH:mm:ss" min="08:00:00" max="17:00:00" required />


 <span class="error" ng-show="myForm.input.$error.time">
         Not a valid date!</span>
   </div>

以下是plunker

这是here

的示例

角度js中的时间验证

1 个答案: