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

标签 javascript angularjs

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

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

看起来像这样:

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 原生的“日期”类型。这条线上的东西可能有效吗?

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

关于javascript - 如何使用 AngularJS 过滤日期范围?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26718140/

相关文章:

javascript - testcafe - 如何断言文本包含在 html 正文中

javascript - 我如何计算点之间的距离 Google Maps Api V3

javascript - Angularjs - 将 blob 保存到不处理动态数据的文本文件

javascript - 测试 Angular Controller : Controller Not Defined

javascript - 添加到项目时出现 Restangular 错误 : `Error: $injector:modulerr`

javascript - 如何将 JSON 从 ASP.NET View 模型保存到 JavaScript 变量中?

javascript - 当对象存在于命名函数中时如何访问外部对象

javascript - 动态D3力图

google-chrome - 如何使用 angular.js 在 chrome 打包的应用程序中进行导航?

java - 使用 Jhipster 为前端和后端生成集成身份验证