按日期范围过滤 ng-repeat（dd/MM/yyyy HH:mm 格式）

Question

我正在尝试通过其中一个变量是否在所选日期内来过滤我在 ng-repeat 中的列表。

我试过使用自定义过滤器来执行此操作，但到目前为止一无所获。我尝试调整的变量采用 dd-MM-yyyy HH:mm 格式。

HTML

<div>
    <input ng-model="dateFrom" />
    <input ng-model="dateTo"  />
    <div ng-repeat="x in log2 | myfilter:dateFrom:dateTo" > {{x.Name}}  In: {{x.In }} Out: {{x.Out}}</div>
</div>

Javascript

MyApp.controller("MainController", function MainController($scope, $timeout, $firebaseArray, $filter, $window) {

$scope.log2 = [
    {"Name": "John",
     "In": "10-10-2017 11:42",
     "Out": "10-10-2017 11:55",},
    {"Name": "Rob",
     "In": "10-01-2018 13:03",
     "Out": "10-01-2018 14:30",}
    ]
$scope.dateFrom = "10-10-2000 ";
$scope.dateTo = "10-10-3000 ";

});



MyApp.filter("myfilter", function() {
  return function(items, $scope) {
        var df = $scope.dateFrom;
        var dt = $scope.dateTo;
        var result = [];        
        for (var i=0; i<items.length; i++){
            var tf = new Date(items[i].In ),
                tt = new Date(items[i].Out );
            if (tf > df && tt < dt)  {
                result.push(items[i]);
            }
        }            
        return result;
  };
});

尝试搜索一些东西，但到目前为止还没有成功。考虑过使用 ISO 日期格式，但不确定如何将现有数据转换为 angular.

中的 ISO 格式

提前感谢您的帮助

Answer 1

您可以使用 angularjs 过滤器和 moment.js(library)

轻松实现

看下面的示例代码：

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.js"></script>
  <script src="https://code.angularjs.org/1.6.6/angular.js"></script>
  <script>
    var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope) {
      $scope.dateFrom = "2017-11-01";
      $scope.dateTo = "2019-08-03";

      $scope.log2 = [{
        "Name": "John",
        "In": "10-10-2017 11:42",
        "Out": "10-10-2018 11:55",
      }, {
        "Name": "Rob",
        "In": "10-01-2018 13:03",
        "Out": "10-01-2018 14:30",
      }]


    });

    app.filter("myfilter", function($filter) {
      return function(items, from, to, dateField) {
        startDate = moment(from);
        endDate = moment(to);

        return $filter('filter')(items, function(elem) {
          var dateIn = moment(elem['In']);
          var dateOut = moment(elem['Out']);
          return (dateIn >= startDate && dateIn <= endDate) || (dateOut >= startDate && dateOut <= endDate);
        });
      };
    });
  </script>
</head>

<body>
  <div ng-controller="MainCtrl">
    
    <input type="text" name="S_Date" ng-model="dateFrom" />
    <input type="text" name="E_Date" ng-model="dateTo" />
    
    
    <div ng-repeat="x in log2 | myfilter:dateFrom:dateTo" > {{x.Name}}  <b>In:</b> {{x.In }} <b>Out:</b> {{x.Out}}</div>
    
  </div>

</body>

</html>

按日期范围过滤 ng-repeat（dd/MM/yyyy HH:mm 格式）

Filter ng-repeat by date range (dd/MM/yyyy HH:mm format)

angularjs

angularjs-ng-repeat

angularjs-filter