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> 

以下是我從上面的形式獲得：（其完美）

我需要的限制然而，不管我做什麼，我都可以輸入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到日期字段我根本無法進入滿一年，我覺得角度覆蓋了「YYYY '通過從右側添加一個數字，然後從左側刪除'y'，因此limitTo=10根本不起作用。

我沒有選擇。

任何幫助或方向將不勝感激。

在此先感謝。

Answer 1

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

這是一個指令，我做了一點，但滲透性，但它的工作。經過Chrome，Safari和Firefox的測試。

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

（我無法理清地址模板plunker所以我嵌入Plunker因爲嵌入模板focus指令不工作如果您實現這一點。用下面的代碼，你的光標應該在完成從一個文本框移動到另一個）

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';