AngularJS过滤器并使用ng显示日期范围
AngularJS新手 - 或整个Web开发场景，
我甚至不知道这是可能的，或者我正在采取最有效的路径，但我目前需要一种方法来过滤使用两个输入框的日期范围，我使用jquery datepicker来始终格式化日期是“YYYY-MM-DD”。
所以，我有以下两个输入框，
<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。
<tr> ng-repeat="dateItem in dateItems | filter:search:strict | filter:dateFilter"
<td>{{dateItem.dueDate}}</td></tr>
我需要一种方式让我们说，
如果用户仅在dueDate字段上选择日期，那么ng-repeat列表将过滤并列出从该日期开始的所有日期。
如果用户仅在toDate字段上选择日期，则为ng-repeat
列表将过滤并列出所有日期到和包括
某个日期。
如果用户在两个字段中选择日期，则列表将显示全部
这两个日期之间的日期。
我非常迷失在哪条路线上，我一直在想我必须编写一个自定义过滤器函数，并将这些日期与if语句等进行比较，但我没有足够体面的代码来说明这里。 ..
任何帮助或指导将不胜感激！
谢谢！
--------------------------------------------- UPDATE ---- ---------------------------
所以我最终试图编写一个自定义过滤器函数来尽我所能......虽然不工作，但......;（如果我取出加粗的条件语句，它有点作用......
$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;
}
};
你熟悉角度引导UI吗？ http://angular-ui.github.io/bootstrap/
有一个扩展可能是你在这里寻找的：http://eternicode.github.io/bootstrap-datepicker/
您可以使用日期选择器来显示可用日期，而不是使用重复的日期列表。 我认为植入可能更容易。
编辑：
否则，你可以写一个日期范围过滤器来处理这个功能。 这可能是一个开始https://gist.github.com/Voles/5459410的好地方
useage：ng-repeat =“... | daterage：start：end”
我正在使用手机，因此目前无法为您提供实施。 另一个用户可能会有义务。
链接地址: http://www.djcxy.com/p/76945.html