如何使用AngularJS过滤日期范围?

时间:2014-11-03 16:06:14

标签: javascript angularjs

我尝试使用日期范围过滤ng-repeat。

到目前为止,我已经安装了Daterangepicker,它将在触发选择器(ng-model="dates")的输入的ng模型中返回一个具有两个属性(startDate和endDate)的对象。

看起来像这样:

Object
   endDate: 
     k_d: Mon Nov 03 2014 23:59:59 GMT+0300 (E. Africa Standard Time)
     _isAMomentObject: true
     _isUTC: false
     _isValid: true
     _locale: j
     _pf: Object_
     _proto__: k
 startDate: k_d: Sat Oct 04 2014 00:00:00 GMT+0300 (E. Africa Standard Time)
     _isAMomentObject: true
     _isUTC: false 
     _isValid: true
     _locale: j
     _pf: Object_
     _proto__: k

另一方面,我有我的ng-repeat,它列出了一个对象数组,每个对象都有一个date属性。

<div class="row msf-row" 
     ng-repeat="record in recordlist | filter:dateFilter | limitTo : -100">
      <div class="col-md-1">{{record.date}}</div>
</div>

我已经构建了一个过滤器来尝试按范围过滤它:

$scope.dateFilter = function (record) {
    return record.date >= $scope.dates.startDate && record.date <= $scope.dates.endDate;
};  

但到目前为止,过滤器无效。我错过了什么?

修改

我意识到record.date是一个字符串,而startDate和endDate是moment()对象。有没有什么办法可以在过滤函数之前将record.date解析成一个moment()对象?

编辑2

修正了它!我必须将result.date解析为momentjs对象,并且还要包含这样的正确格式:moment(string, format)

$scope.dateFilter = function (record) {
    return 
       moment(record.date, "DD[/]MM[/]YYYY") >= $scope.dates.startDate 
       && 
       moment(record.date, "DD[/]MM[/]YYYY") <= $scope.dates.endDate;
};  

1 个答案:

答案 0 :(得分:3)

查看您的日期对象,看起来它不是JavaScript原生的&#39;日期&#39;类型。可能是这条线上的东西有效吗?

$scope.dateFilter = function (record) {
    var startDate = new Date($scope.dates.startDate.k_d);
    var endDate = new Date($scope.dates.endDate.k_d);

    return record.date >= startDate && record.date <= endDate;
}; 

分享一个jsfiddle可能更有助于找出确切的问题。