需要幫助來驗證角jquery UI datepicker指令

我創建了jQuery-UI datepicker的angularjs指令，我在formj中使用它，但卡在驗證部分。我使用這個指令在我和我需要驗證日期不超過日期的日期，我發佈我的指令代碼以供參考。請糾正我關於要完成的驗證。需要幫助來驗證角jquery UI datepicker指令

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 formly

[{ 
"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 :" 
} 
}]

來源

2016-06-09 M Balajivaishnav

要日期應該更高？ –

@ gayathri耶日期應該大於從日期 –

JSON文件HI請檢查該設計人員可以不神韻：

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

來源

2016-06-09 07:36:18

你知道我怎麼可以在JSON文件 –

有棱角的形式引用這個角度formly？ –

哎呀，請參閱編輯的評論 –

需要幫助來驗證角jquery UI datepicker指令

回答

相關問題