Angular.Js輸入[日期]驗證

Question

這是我的表格：

<form name="user_submission" novalidate="novalidate" method="post">
        <input type="date" name="date_of_birth" ng-focus="save_data()" ng-model-options="{timezone: 'UTC'}" ng-pattern="/^(19\d{2}|[2-9]\d{3})-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/" ng-model="step_content.date_of_birth" required ng-maxlength="10" ng-minlength="10"  >
    <br>
                    <span class="error" ng-show="user_submission.date_of_birth.$error.pattern">Wrong format!</span>
                    <span class="error" ng-show="user_submission.date_of_birth.$error.date">Wrong Date!</span>
                    <span class="error" ng-show="user_submission.date_of_birth.$error.minlength">Wrong Date!</span>
                    <span class="error" ng-show="user_submission.date_of_birth.$error.maxlength">Wrong Date!</span>
</form>

這是我從上面的表格中得到的：（最完美的）

我需要將“年”限制為“ yyyy”，但是無論我做什么，我都可以輸入4位以上的數字。

我嘗試了一個指令：

// Usage: <input limit-to="4" type="number" >

app.directive("limitTo", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            angular.element(elem).on("keydown", function() {
                if (this.value.length == limit) return false;
            });
        }
    }
}]);

但是，當我在日期字段中添加limitTo ，我根本無法輸入完整的年份，我認為Angular會通過從右側添加一個數字然后從左側刪除'y'來覆蓋'yyyy'，因此limitTo=10根本不是去上班。

我沒有選擇。

任何幫助或指示將不勝感激。

提前致謝。

Answer 1

我放棄並編寫了自己的指令，如果有人遇到相同的問題，我不會刪除此問題。

這是我制定的指令，雖然有些滲透，但它確實起作用。 在Chrome，Safari和Firefox中進行了測試。

這是Plunker地址： https ://plnkr.co/edit/XwNR618DM8IULxu9KLMe

（由於無法嵌入模板focus指令，因此我無法在模板中整理出代碼的地址，因此我將其嵌入到Plunker中。如果使用以下代碼實現此功能，則光標應從一個文本字段移至另一個文本字段完成后。）

    app.directive('multiSelectDate', function () {

        return {
            restrict: 'EA',
            scope: {
                datasource: '='
            },
            controller: function ($scope) {

                $scope.date = {
                    day: [],
                    month: [],
                    year: []
                };

                if (typeof $scope.datasource != 'undefined' && $scope.datasource != '') {
                    var sources = $scope.datasource.split('/');

                    if (typeof sources == 'object') {
                        $scope.date = {
                            day: [sources[0][0], sources[0][1]],
                            month: [sources[1][0], sources[1][1]],
                            year: [sources[2][0], sources[2][1], sources[2][2], sources[2][3]],
                        };
                    }
                }

                $scope.only_one_allowed = function(array) {
                    var val = [];
                    angular.forEach(array, function(value, index){
                        if (typeof value != 'undefined') {
                            if (value.length > 1) {
                                val[index] = value.split('')[1];
                            } else {
                                val[index] = value
                            }
                        }
                    });
                    return val;
                };

                $scope.only_number_allowed = function(array, type) {

                    if (type == 'year') {
                        var year_1st_digit = /1|2/;
                        var year_2nd_digit = /0|9/;
                        var year_rest_digit = /[0-9]/;

                        if (!year_1st_digit.test(array[0])) {
                            array[0] = '';
                        }
                        // Should be 0 or 9
                        if (!year_2nd_digit.test(array[1])) {
                            array[1] = '';
                        }
                        if (!year_rest_digit.test(array[2])) {
                            array[2] = '';
                        }
                        if (!year_rest_digit.test(array[3])) {
                            array[3] = '';
                        }

                    } else if (type == 'month') {

                        var month_1st_digit = /[0-1]/;
                        var month_2nd_digit = /[0-9]/;

                        // Shouldn't be more than 1 or less than 0
                        if (!month_1st_digit.test(array[0])) {
                            array[0] = '';
                        }

                        // Shouldn't be more than 2 or less than 0
                        if (!month_2nd_digit.test(array[1])) {
                            array[1] = '';
                        }

                        // if the month[0] is undefined and second digit has value change the first digit to 0
                        if (( typeof array[0] == 'undefined' || array[0] == '' ) && parseInt(array[1]) >= 0) {
                            array[0] = 0;
                        }

                        // date.array must have only one digit
                        if (parseInt(array[0], 10) != array[0]) {
                            array[0] = '';
                        }

                        if (parseInt(array[1], 10) != array[1]) {
                            array[1] = '';
                        }


                        if (parseInt(array[0], 10) == array[0] && parseInt(array[1], 10) != array[1]) {
                            array[1] = 0;
                        }


                    } else {

                        var day_1st_digit = /[0-3]/;
                        var day_2nd_digit = /[0-9]/;

                        // Shouldn't be more than 1 or less than 0
                        if (!day_1st_digit.test(array[0])) {
                            array[0] = '';
                        }

                        // Shouldn't be more than 2 or less than 0
                        if (!day_2nd_digit.test(array[1])) {
                            array[1] = '';
                        }

                        // if the day[0] is 3 then second digits must be less than 1
                        if (parseInt(array[0]) == 3 && parseInt(array[1]) > 1) {
                            array[1] = 1;
                        }

                        // if the day[0] is undefined and second digit has value change the first digit to 0
                        if (( typeof array[0] == 'undefined' || array[0] == '' ) && parseInt(array[1]) >= 0) {
                            array[0] = 0;
                        }

                        // date.array must have only one digit
                        if (parseInt(array[0], 10) != array[0]) {
                            array[0] = '';
                        }

                        if (parseInt(array[1], 10) != array[1]) {
                            array[1] = '';
                        }

                        if (parseInt(array[0], 10) == array[0] && parseInt(array[1], 10) != array[1]) {
                            array[1] = 0;
                        }


                    }

                    return array;
                };

                $scope.update_date = function () {

                    var day = '';
                    var month = '';
                    var year = '';

                    if (typeof $scope.date.day != 'undefined') {
                        var dirty_day = $scope.only_one_allowed($scope.date.day);
                        dirty_day = $scope.only_number_allowed(dirty_day, 'day' );
                        $scope.date.day = dirty_day;
                        day = dirty_day.join('');
                    }

                    if (typeof $scope.date.month != 'undefined') {
                        var dirty_month = $scope.only_one_allowed($scope.date.month);
                        dirty_month = $scope.only_number_allowed(dirty_month, 'month' );
                        $scope.date.month = dirty_month;
                        month = dirty_month.join('');
                    }

                    if (typeof $scope.date.year != 'undefined') {
                        var dirty_year = $scope.only_one_allowed($scope.date.year);
                        dirty_year = $scope.only_number_allowed(dirty_year, 'year' );
                        $scope.date.year = dirty_year;
                        year = dirty_year.join('');
                    }

                    $scope.datasource = day + '/' + month + '/' + year
                }
            },
            templateUrl: '/multiSelectDate.html',
            link: function (scope, element, attrs) {

                var start_year = attrs.startYear;
                if (scope.date.year.length != 4 && typeof start_year != 'undefined') {
                    scope.date.year = [start_year[0], start_year[1], start_year[2], start_year[3]];
                }

   scope.$watch('datasource', function(){

                var sources = scope.datasource.split('/');

                if (typeof sources == 'object') {
                    if (sources.length == 3) {
                        scope.date = {
                            day: [sources[0][0], sources[0][1]],
                            month: [sources[1][0], sources[1][1]],
                            year: [sources[2][0], sources[2][1], sources[2][2], sources[2][3]]
                        };
                    }

                }
            })



            }
        }
    });

這是模板：（/ /multiSelectDate.html ）

<div class="form-inline">
    <input type="text" focus ng-model="date.day[0]" class="dl_float" size="1" ng-keyup="update_date()">
    <input type="text" focus ng-model="date.day[1]" class="dl_float" size="1" ng-keyup="update_date()"> /
    <input type="text" focus ng-model="date.month[0]" class="dl_float" size="1" ng-keyup="update_date()">
    <input type="text" focus ng-model="date.month[1]" class="dl_float" size="1" ng-keyup="update_date()"> /
    <input type="text" focus ng-model="date.year[0]" class="dl_float" size="1" ng-keyup="update_date()">
    <input type="text" focus ng-model="date.year[1]" class="dl_float" size="1" ng-keyup="update_date()">
    <input type="text" focus ng-model="date.year[2]" class="dl_float" size="1" ng-keyup="update_date()">
    <input type="text" focus ng-model="date.year[3]" class="dl_float" size="1" ng-keyup="update_date()">
</div>

這里是重點：

// <input focus type="text" />

    app.directive('focus', function () {
        return {
            restrict: 'A',
            link: function ($scope, elem, attrs) {
                elem.bind('keyup', function (e) {
                    if (e.keyCode == 8) {
                        if (typeof elem.prev() != 'undefined' && elem.prev().size() > 0) {
                            elem.prev()[0].focus();
                            elem.prev()[0].value = '';
                        }
                    } else {
                        if (typeof elem.next() != 'undefined' && elem.next().size() > 0) {
                            var val = elem[0].value;
                            if (!isNaN(parseFloat(val)) && isFinite(val)) {
                                elem.next()[0].focus();
                            }
                        }
                    }

                });
            }
        }
    });

這是一個示例CSS：

.dl_float {
  font-size: 14px !important;
  width: 19px;
}

這里如何使用它：

<multi-select-date datasource="date_of_birth" start-year="1945" ></multi-select-date>

在這里您如何看到結果

{{date_of_birth}}

如果需要在控制器中，請按以下步驟啟動它：

$scope.date_of_birth = '11/01/1950';