Question

我知道它可能是重复问题，但我也尝试过，但它没有用。所以，我现在正在发布我的问题。我的问题是使用Angular js仅使用一列来应用日期范围过滤器。这是我的代码：

HTML：

<div ng-app="myApp" ng-controller="myCtrl">
<div>
<table>
<tr>
<td>Start Date</td>
<td><input type="text" name="S_Date" ng-model="startDate"/></td>
<td>End Date</td>
<td><input type="text" name="E_Date" ng-model="endDate"/>
</tr>
</table>
</div>
<table>
       <tr>
        <th>Date</th>.
        <th>Stock</th>
       </tr>
       <tr ng-repeat="subject in records |myfilter:startDate:endDate">
         <td>{{ subject.name * 1000|date:'dd-MM-yyyy'}}<td>
         <td>{{ subject.marks }}</td>
       </tr>

 </table>

Angular JS：

<script>
var app = angular.module('myApp', []);

    app.controller('myCtrl', function($scope) {
           $scope.records = [
           {
                "name" : "2016-08-01",
                "marks" : 250
            },{
                "name" : "2016-08-02",
                "marks" : 150
            },{
                "name" : "2016-08-03",
                "marks" : 100
            },{
                "name" : "2016-08-04",
                "marks" : 150
            },{
                "name" : "2016-05-01",
                "marks" : 750
            },{
                "name" : "2016-05-02",
                "marks" : 1500
            },{
                "name" : "2016-03-03",
                "marks" : 500
            },{
                "name" : "2016-04-04",
                "marks" : 650
            }
        ]


         function parseDate(input) {
      var parts = input.split('-');
      return new Date(parts[2], parts[1]-1, parts[0]); 
    }   
    app.filter("myfilter", function() {
      return function(items, from1, to) {

        var df = parseDate(from1);
            var dt = parseDate(to);
            alert(df)
            alert(dt)
            var result = [];        
            for (var i=0; i<items.length; i++){
                var tf = new Date(items[i].startDate * 1000),
                    tt = new Date(items[i].endDate * 1000);
                if (tf > df && tt < dt)  {
                    result.push(items[i]);
                }
            }            
            return result;
      };
    });
    });
    </script>

请告诉我哪里出错了。请建议我。谢谢。

Answer 1

我建议你使用moment.js库：http://momentjs.com/

以下是您的范围过滤器的使用plunkr：https://plnkr.co/edit/dfpsBI0uom5ZAEnDF3wM?p=info

<div ng-controller="MainCtrl">
<table>
  <tr>
    <td>Start Date</td>
    <td>
      <input type="text" name="S_Date" ng-model="startDate" />
    </td>
    <td>End Date</td>
    <td>
      <input type="text" name="E_Date" ng-model="endDate" />
    </td>
  </tr>
</table>
<table>
  <tr>
    <th>Date</th>.
    <th>Stock</th>
  </tr>
  <tr ng-repeat="subject in records | myfilter: startDate: endDate">
    <td>{{ subject.name | date:'dd-MM-yyyy'}}</td>
    <td>{{ subject.marks }}</td>
  </tr>
</table>
</div>



app.controller('MainCtrl', function($scope) {
    $scope.startDate = "2016-08-01";
    $scope.endDate = "2016-08-03";
    $scope.records = [{
    "name": "2016-08-01",
    "marks": 250
    }, {
    "name": "2016-08-02",
    "marks": 150
    }, {
    "name": "2016-08-03",
    "marks": 100
    }, {
    "name": "2016-08-04",
    "marks": 150
    }, {
    "name": "2016-05-01",
    "marks": 750
    }, {
    "name": "2016-05-02",
    "marks": 1500
    }, {
    "name": "2016-03-03",
    "marks": 500
    }, {
    "name": "2016-04-04",
    "marks": 650
    }];
   });

   app.filter("myfilter", function($filter) {
    return function(items, from, to) {
     return $filter('filter')(items, "name", function(v) {
      var date = moment(v);
      return date >= moment(from) && date <= moment(to);
     });
    };
   });

Answer 2

$scope.Customfilterobj`enter code here`  = { status: "Complete",StartDate: "2017-02-01T08:00:00",EndDate: "2018-02-01T08:00:00 " };


<tr ng-repeat="dt in data | filter: {Status: Customfilterobj.status} | dateRange:Customfilterobj.StartDate:Customfilterobj.EndDate">

这里我们使用了两个过滤器：

filter: {Status: Customfilterobj.status}作为比较工作＆＃34;完成＆＃34;值与数据收集状态。

dateRange:Customfilterobj.StartScheuleDate:Customfilterobj.EndScheuleDate"：dateRange是自定义过滤器，用于比较StartDate和EndDate之间的Expiration_date。

app.filter('dateRange', function () {
            return function (data, greaterThan, lowerThan) {
                 if (greaterThan != null && lowerThan != null && greaterThan != undefined && lowerThan != undefined) {
                    data = data.filter(function (item) {
                        if (item.Expiration_date != null) {
                           var exDate = new Date(item.Expiration_date);
                           return exDate >= new Date(greaterThan) && exDate <= new Date(lowerThan);
                        }
                    });
                }
                return data;
            };
        });

Answer 3

添加Roman Koliada's plunker。他的过程在角度$ filter的使用中有一个小问题。我在这里更新了：

https://plnkr.co/edit/l4t4Fln4HhmZupbmOFki?p=preview

新过滤器：

 app.filter("myfilter", function($filter) {
  return function(items, from, to, dateField) {
    startDate = moment(from);
    endDate = moment(to);
    return $filter('filter')(items, function(elem) {
      var date = moment(elem[dateField]);
      return date >= startDate && date <= endDate;
   });
  };
});

问题是输入$ filter函数的函数是第三个参数，并循环遍历列表中每个对象的每个属性。控制器记录他的plunker会在每个对象的每个属性上调用moment（）。相反，输入一个函数作为第二个参数，作为表达而不是比较器 - 我们只能在日期字段上调用比较。

Angular doc：https://docs.angularjs.org/api/ng/filter/filter

Angular JS：如何在一列中的两个日期之间应用日期范围过滤器

3 个答案: