【问题标题】:How to filter with date range with AngularJS?如何使用 AngularJS 过滤日期范围?
【发布时间】:2014-12-30 08:08:42
【问题描述】:

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

到目前为止,我已经安装了 Daterangepicker,它将在触发选择器 (ng-model="dates") 的输入的 ng-model 中返​​回一个具有两个属性(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;
};  

【问题讨论】:

    标签: javascript angularjs


    【解决方案1】:

    查看您的日期对象,它似乎不是 JavaScript 原生的“日期”类型。这条线上的东西可能有用吗?

    $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 可能更有助于找出确切的问题。

    【讨论】:

    • 其实你是对的。 startDate 和 endDate 是 moment() 实例,但 record.date 是一个字符串。我可以以某种方式将其解析为 moment() 吗?
    • 我之前没用过 moment.js,但是看看他们的 API,你可以做一些类似 $scope.dates.startDate.format() 的事情来将时刻转换为日期字符串。或者,您可以使用时刻构造函数,例如 moment(record.date) 将日期字符串转换为时刻。
    猜你喜欢
    • 2016-08-20
    • 1970-01-01
    • 1970-01-01
    • 2014-02-06
    • 1970-01-01
    • 2016-10-27
    • 2017-05-26
    • 2020-02-26
    • 2013-03-26
    相关资源
    最近更新 更多