Angular JS指令,用于在日期字段中自动插入斜杠“/”。例如MM / DD / yyyy

时间:2016-09-16 11:43:26

标签: angularjs

我正在尝试添加输入日期字段的功能,以便当用户输入数字时,斜杠“/”会自动添加到Jquery中,但我需要在Angular JS指令中。 提前致谢

4 个答案:

答案 0 :(得分:3)



var app = angular.module('myApp', []);
		  app.controller('appCtrl', ['$scope', function($scope){
		     $scope.change = function(e) {
		     	var numChars = $scope.date.length;
				if(numChars === 2 || numChars === 5){
					var thisVal = $scope.date;
					thisVal += '/';
					$scope.date = thisVal;
				}
		      };
		  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="appCtrl">
        <h4>Minimum date</h4>
        <input minlength="0"  maxlength="10" placeholder="DD/MM/YYYY" id="date" ng-change="change()" ng-model="date">
     </div> 
&#13;
&#13;
&#13; 工作实例。请尝试

答案 1 :(得分:1)

您可以使用此指令:

https://github.com/g00fy-/angular-datepicker

指定格式,如下所示:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            $result = $db->db_connection->query("SELECT * FROM news");
            if ($result) { 
                while ($obj = $result->fetch_object()) {    
                    //some html code here
                }
            }
        </div>
    </div>
</div>

答案 2 :(得分:1)

根据我的要求,我找到了解决问题的简单方法,希望能够为其他人提供帮助。 如果您使用的是anguler-dialog.js,则可以将指令用作<input type="text" ng-model="Modelname" ui-mask="99/99/999" ui-mask-placeholder>

答案 3 :(得分:0)

以前的答案并不符合我的要求所以我写了这个指令专门用mm / dd / yyyy格式来处理日期,并在适当的时候自动添加斜杠。

app.directive('addDobSlashes', function() {
  return {
    require: 'ngModel',
    restrict: 'A',
    link: function(scope, element, attr, ctrl) {

      var isDelete = false;
      element.keydown(function(e) {
        isDelete = e.keyCode === 8; // if we hit delete
      });
      // store regex patterns
      var mmRegEx = /^(0?[23456789]|01|10|12)$/;
      var mmDDRegEx = /^(0?[23456789]|01|10|12|1)[\/.](0[1-9]|[12][0-9]|3[01])$/;

      function inputValue(val) {
        if (isDelete) {
          return val;
        }

        if (val) {
          //first only allow digits and slashes
          val = val.replace(/[^0-9\/]/g, '');

          // prevent duplicate
          if (val[val.length - 1] === '/' && val.length - 2 >= 0 && val[val.length - 2] === '/') {
            val = val.slice(0, -1);
          }
          // test against or mm or mm/dd regex patterns
          // automatically add slashes
          if (mmRegEx.test(val)) {
            val += '/';
          } else if (mmDDRegEx.test(val)) {
            val += '/';
          }
          ctrl.$setViewValue(val);
          ctrl.$render();
          return val;
        } else {
          return undefined;
        }
      }
      ctrl.$parsers.push(inputValue);
    }
  };
});