我甚至不确定这是否可行,或者我是否采用最有效的路径,但我目前需要使用两个输入框来过滤日期范围的方法,我使用jquery datepicker来始终格式化日期成为“YYYY-MM-DD”.@H_502_3@
所以,我有以下两个输入框,@H_502_3@
<label class="" for="DateFromFilter"> Date From: </label> <input date-picker type="text" id="DateFromFilter" class="form-control" title="Please enter in YYYY-MM-DD format." ng-model="search.dueDate" /> <label class="" for="DateToFilter"> Date To: </label> <input date-picker type="text" id="DateToFilter" class="form-control" title="Please enter in YYYY-MM-DD format." ng-model="search.toDate" />
当然,我有一个带有ng-repeat指令的表,从本地JSON文件中获取数据……只接收到dueDate.@H_502_3@
<tr> ng-repeat="dateItem in dateItems | filter:search:strict | filter:dateFilter" <td>{{dateItem.dueDate}}</td></tr>
我需要一种方式来说,@H_502_3@
>如果用户仅在dueDate字段上选择日期,则ng-repeat
列表将过滤并列出该日期及之后的所有日期.
>如果用户仅在toDate字段上选择日期,则ng-repeat
列表将过滤并列出所有日期,包括该日期
某个约会.
>如果用户在两个字段上选择日期,则列表将全部显示
这两个日期之间的日期.@H_502_3@
我迷失在哪条路上,我一直在想我必须编写一个自定义过滤器函数并将日期与if语句进行比较等等,但我没有足够的代码来说明这里. ..@H_502_3@
任何帮助或指导将不胜感激!@H_502_3@
谢谢!@H_502_3@
——————————————— UPDATE —- —————————@H_502_3@
所以我最终试图尽我所能写出一个自定义过滤器功能..虽然不起作用……;(如果我拿出粗体条件语句,它有点起作用……@H_502_3@
$scope.dateFilter = function (item) { /* * When the display starts,the inputs are undefined. also need to * account for when the inputs are empty to return everything. */ if ((!angular.isUndefined($scope.dueDate) && $scope.dueDate != "" ) **&& (angular.isUndefined($scope.toDate) || $scope.toDate == "" )**) { var inputDate = new Date($scope.dueDate); var incomingDate = new Date(item.dueDate); if (inputDate <= incomingDate) { return true; } else { return false; } } else if ((!angular.isUndefined($scope.toDate) && $scope.toDate != "")**&& (angular.isUndefined($scope.dueDate) || $scope.dueDate == "" )**) { var inputDate = new Date($scope.toDate); var incomingDate = new Date(item.dueDate); if (inputDate >= incomingDate) { return true; } else { return false; } } else if ((!angular.isUndefined($scope.dueDate) && $scope.dueDate != "" )&& (!angular.isUndefined($scope.toDate) && $scope.toDate != "")) { var inputDueDate = new Date($scope.dueDate); var inputToDate = new Date($scope.toDate); if (inputDueDate < item.dueDate && inputToDate > item.dueDate ) { return true; } else { return false; } } else { return true; } };
解决方法
http://angular-ui.github.io/bootstrap/
你可以在这里找到一个扩展名:http://eternicode.github.io/bootstrap-datepicker/@H_502_3@
您可以使用日期选择器显示可用日期,而不是使用重复的日期列表.我认为它可能更容易被植入.@H_502_3@
编辑:@H_502_3@
否则,您可以编写日期范围过滤器来处理此功能.这可能是一个很好的起点
https://gist.github.com/Voles/5459410@H_502_3@