需要帮助来验证 angular jquery UI datepicker 指令答案

【问题标题】：Need Help to validate angular jquery UI datepicker directive需要帮助来验证 angular jquery UI datepicker 指令
【发布时间】：2016-10-09 15:06:26
【问题描述】：

我正在使用 jQuery-UI datepicker 创建一个 angularjs 指令，我在 angularjs 中正式使用它，但停留在验证部分。我在 from 和 to date 中都使用了这个指令，我需要验证 to date 不大于 from date，我在下面发布了我的指令代码供您参考。请纠正我关于要完成的验证。

app.directive("datePicker", function () {
return {
    restrict: "A",
    require: "ngModel",
    link: function (scope, elem, attrs, ngModel) {
        var updateModel = function (dateText) {  
            ngModel.$render = function () {
                scope.$apply(function () {
                    ngModel.$setViewValue(dateText);
                    console.log(dateText);
                });
                };

        };
        var options = {
            dateFormat: "mm/dd/yy",
            onSelect: function (dateText) {
                updateModel(dateText);
            },
            showButtonPanel: true
        };
        elem.datepicker(options);
    }
};

});

正式使用 angularjs 指令的 Json 文件

[{
"id": "fromdate",
"key": "fromdate",
"type": "input",
"ngModelAttrs": {
    "datePicker": {
        "attribute": "date-picker"
    }
},
"templateOptions": {
    "required": true,
    "datePicker": "",
    "label": "From Date :"
}

}, {
"id": "todate",
"key": "todate",
"type": "input",
"ngModelAttrs": {
    "datePicker": {
        "attribute": "date-picker"
    }
},
"templateOptions": {
    "required": true,
    "datePicker": "",
    "label": "To Date :"
}
}]

【问题讨论】：

到日期应该更高？
@gayathri 是的，日期应该大于起始日期

标签： jquery angularjs validation datepicker angular-formly

【解决方案1】：

您好，请检查此设计可能未对齐

HTML

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <h1> Selected date: {{date2}}</h1>
  <h1> Selected date: {{todate}}</h1>

  <input type="text" ng-model="date2" valueupdate="date2"  datepicker pie-chart-limit-progress-bar="todate" />

  <input type="text" ng-model="todate" datepicker   />

</body>
</html>

在 script.js 中

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.date2 = '19/03/2013';
});


app.directive('datepicker', function() {
    return {
        restrict: 'A',   
        require : 'ngModel',

        link : function (scope, element, attrs, ngModelCtrl) {
            $(function(){
                element.datepicker({
                    dateFormat:'dd/mm/yy',
                    onSelect:function (date) {
                        ngModelCtrl.$setViewValue(date);
                        scope.valueupdate = date;
                          scope.$apply(); 
                    }
                });
            });
        }
    }
});
app.directive('pieChartLimitProgressBar',['$compile', function ($compile) {
  return {
    restrict: 'A',
    scope: {
        percent: "=pieChartLimitProgressBar",        
        valueupdate: '='
    },
    link: function (scope, elem, attr, ctrl) {

      scope.$watch('displayvalue', function(value) {

console.log(value);
      });

      scope.$watch('percent', function(value) {        

        if(scope.valueupdate != undefined && value != undefined)
        {
          var from = scope.valueupdate.split("/");
         var fromdate = new Date(from[2], from[1] - 1, from[0]);
         var todate = value.split("/");
         var todatevalue = new Date(todate[2], todate[1] - 1, todate[0]);
          console.log(fromdate , todatevalue)

          if (fromdate > todatevalue ) {
             var myEl = angular.element( document.querySelector( '#divID' ) );
               myEl.empty();
             var tpl = '<div id="divID"  ng-show = true style="color:red">TO Date should be HIgher</div>' ;
                var el = $compile(tpl)(scope);
                elem.after(el);
          }
          else
          {
            var myEl = angular.element( document.querySelector( '#divID' ) );
               myEl.empty();

          }
        }




      });

    }

};
}]);

供参考http://plnkr.co/edit/lolRZ1GdIiXNb25NwfZR?p=preview

【讨论】：

你知道我如何在 JSON 文件中以角度形式引用它
对不起，一旦用户手动选择，我就无法理解您的问题，那么只有您可以检查从哪里到哪里更大的日期？
功能部分是检查 from 和 to date 是否正确，但我使用 angularjs 正式不是纯 HTML 文件，所以我必须参考这部分 datepicker pie-chart-limit-progress-bar ="todate"（在 HTML 中）到 JSON 文件（我已粘贴在问题中）你得到我的问题了吗？..
如果你想从 JSON 中读取，你可以直接在控制器中比较响应两个日期并显示简单的错误消息，如果你想执行选择日期选择器，请按照上述操作
让我们continue this discussion in chat.