需要帮助来验证 angular jquery UI datepicker 指令
Posted
技术标签:
【中文标题】需要帮助来验证 angular jquery UI datepicker 指令【英文标题】：Need Help to validate angular jquery UI datepicker directive 【发布时间】：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 是的，日期应该大于起始日期 【参考方案1】：您好，请检查此设计可能未对齐
<!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.以上是关于需要帮助来验证 angular jquery UI datepicker 指令的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Jquery 更改 Angular-UI 元素属性