AngularJS使用ng-repeat过滤并显示日期范围

Question

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;
  }      
};

Answer 1

您熟悉 Angular Bootstrap UI 吗？ http://angular-ui.github.io/bootstrap/

有一个扩展可能正是您在这里寻找的： http: //eternicode.github.io/bootstrap-datepicker/

您可以使用日期选择器来显示可用日期，而不是使用重复的日期列表。我认为实施可能更容易。

编辑：

否则，您可以编写一个日期范围过滤器来处理此功能。这可能是一个很好的起点 https://gist.github.com/Voles/5459410

用法： ng-repeat="... | 日期:开始:结束"

我正在使用手机，因此目前无法为您提供实施方案。另一个用户也许可以答应。