使用 angularjs 过滤两个选定日期之间的 table 数据时出现问题

Question

我正在根据两个选定日期过滤 table 内容。它确实过滤了日期，但结果不正确。 dateRange Filter 写在controller.

生产控制器

angular.module('app').controller('ProductionController',
    ['$scope','$state','ProductionService','FarmerRepository', 
     function(scope,state,ProductionService,FarmerRepository) {
     fetchAllUsers();
     function fetchAllUsers() {
     ProductionService.fetchAllUsers().then(function(d) {
     produceList = d;
     scope.produceList = produceList;
     }, function(errResponse) {
     console.error('Error while fetching produceList');
     });
     };

    //this is custom filter

    .filter('dateRange', function() {
    return function(produceList, fromDate, toDate) {    
    if(fromDate && toDate){
    var filtered = [];
    angular.forEach(produceList, function(items) {
        if (items.produceDate > Date.parse(fromDate) && items.produceDate < Date.parse(toDate))
            filtered.push(items);
    });
    return filtered;
    }
    else
    return produceList;
    }})

view.html

<datepicker date-format="dd/MM/yyyy" >
   <input class="form-control" name="from_date"
   type="text" ng-model="from_date" required />
</datepicker>



<datepicker date-format="dd/MM/yyyy" selector="form-control">
    <input class="form-control" name="to_date"
    type="text" ng-model="to_date" required />
</datepicker>


 <tr ng-repeat="item in produceList |dateRange:from_date:to_date|filter:search">

编辑： 脚本顺序

<script ng-src=".js/moment.js"></script>
<script ng-src="./js/alasql.min.js"></script>
<script ng-src="./js/xlsx.core.min.js"></script>
<link ng-href="./css/page.css" rel="stylesheet" />
<link ng-href="./css/angular-datepicker.css" rel="stylesheet"
type="text/css" />
<link ng-href="./css/page.css" rel="stylesheet" />

请检查转换后的日期 value.produceDate 当转换为数字格式时它不位于从和到 date.hence 之间，这里没有进行过滤。

angular.module('app', ['720kb.datepicker']).controller('MyController', function ($scope) {  
  var formatStr = 'DD/MM/YYYY';
  $scope.from_date = moment("2017-05-02").format(formatStr);
  $scope.to_date = moment("2017-05-10").format(formatStr);  
  
 $scope.produceList = [{
  "itemName": "Mango",
  "produceDate": 1493360722000,
  "produceId": 90
 }, 
 {
  "itemName": "Banana",
  "produceDate": 1493290754000,
  "produceId": 89
 }, 
 {
  "itemName": "Grapes",
  "lastDateForBid": 1493510400000,
  "produceDate": 1493099760000,
  "produceId": 83
 },
  {
  "itemName": "Apple",
  "produceDate": 1490615680000,
  "produceId": 66
 },
 {
  "itemName": "Grapes",
  "produceDate": 1490615515000,
  "produceId": 65
 }]
 })

 .filter('dateRange', function() {
    var formatStr = 'DD/MM/YYYY';
    return function(produceList, fromDate, toDate) {    
      if(fromDate && toDate){
        var filtered = [];
        angular.forEach(produceList, function(items) {        
            if (items.produceDate > Date.parse(moment(fromDate, formatStr)) && items.produceDate < Date.parse(moment(toDate, formatStr)))
                filtered.push(items);
        });
        return filtered;
      }
      else
        return produceList;
}})

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.19/angular-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.19/angular-datepicker.min.css" rel="stylesheet" type="text/css" />

<div ng-app='app' ng-controller="MyController">        
<div>
fromDate: <datepicker date-format="dd/MM/yyyy"><input ng-model="from_date" type="text"/></datepicker>     
</div>            
<div>
toDate: <datepicker date-format="dd/MM/yyyy"><input ng-model="to_date" type="text"/></datepicker>       
</div>  
search:
<br/>
<input type='text' ng-model='search'/>
    <ul>
      <li ng-repeat="item in produceList | dateRange:from_date:to_date |filter:search">
        {{item | json}}
      </li>
    </ul>
</div>

Answer 1

我在你的 .filter 上做了一些修改并使用了这个 datepicker 指令：

angular.module('app', ['720kb.datepicker']).controller('MyController', function ($scope) {    
  $scope.from_date = '02/05/2017';
  $scope.to_date = '10/05/2017';  
  
  $scope.produceList = [
    {itemName:'Tom', produceDate: Date.parse(new Date(2017, 5, 9))},
    {itemName:'Sam', produceDate: Date.parse(new Date(2017, 5, 10))},
    {itemName:'Paul', produceDate: Date.parse(new Date(2017, 5, 11))},
    {itemName:'Henry', produceDate: Date.parse(new Date(2017, 5, 12))},
  ]

}).filter('dateRange', function() {
    
    var fromStr2Date = function(date){
      var days = +date.substr(0, 2);
      var month = +date.substr(3, 2);
      var year = +date.substr(6, 4);
      return new Date(year, month, days);
    }
    
    return function(produceList, fromDate, toDate) {    
      if(fromDate && toDate){
        var filtered = [];
        angular.forEach(produceList, function(items) {        
            if (items.produceDate > Date.parse(fromStr2Date(fromDate)) && items.produceDate < Date.parse(fromStr2Date(toDate)))
                filtered.push(items);
        });
        return filtered;
      }
      else
        return produceList;
}})

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.19/angular-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.19/angular-datepicker.min.css" rel="stylesheet" type="text/css" />

<div ng-app='app' ng-controller="MyController">        
<div>
fromDate: <datepicker date-format="dd/MM/yyyy"><input ng-model="from_date" type="text"/></datepicker>     
</div>            
<div>
toDate: <datepicker date-format="dd/MM/yyyy"><input ng-model="to_date" type="text"/></datepicker>       
</div>  
search:
<br/>
<input type='text' ng-model='search'/>
    <ul>
      <li ng-repeat="item in produceList | dateRange:from_date:to_date |filter:search">
        {{item | json}}
      </li>
    </ul>
</div>

Answer 2

这是您需要的解决方案。我也使用了 moment js，但采用了一种相当简单的方法，根据您提供的数据比较 epoch 次。

<!DOCTYPE html>
<html>

<body>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.19/angular-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.19/angular-datepicker.min.css" rel="stylesheet" type="text/css" />

<div ng-app='app' ng-controller="MyController">        
<div>
fromDate: <datepicker date-format="dd/MM/yyyy"><input ng-model="from_date" type="text"/></datepicker>     
</div>            
<div>
toDate: <datepicker date-format="dd/MM/yyyy"><input ng-model="to_date" type="text"/></datepicker>       
</div>  
search:
<br/>
<input type='text' ng-model='search'/>
    <ul>
      <li ng-repeat="item in produceList | dateRange:from_date:to_date |filter:search">
        {{item | json}}
      </li>
    </ul>
</div>
<script>
angular.module('app', ['720kb.datepicker']).controller('MyController', function ($scope) {  
  var formatStr = 'DD/MM/YYYY';
    $scope.from_date = moment("2017-04-05").format(formatStr);
  $scope.to_date = moment("2017-04-29").format(formatStr);  
    $scope.produceList = [{
  "itemName": "Mango",
  "produceDate": 1493360722000,
  "produceId": 90
 }, 
 {
  "itemName": "Banana",
  "produceDate": 1493290754000,
  "produceId": 89
 }, 
 {
  "itemName": "Grapes",
  "lastDateForBid": 1493510400000,
  "produceDate": 1493099760000,
  "produceId": 83
 },
  {
  "itemName": "Apple",
  "produceDate": 1491808021000,
  "produceId": 66
 },
 {
  "itemName": "test1",
  "produceDate": 1491805456000,
  "produceId": 65
 },
 {
  "itemName": "test2",
  "produceDate": 1490615680000,
  "produceId": 65
 },
 {
  "itemName": "test3",
  "produceDate": 1490615515000,
  "produceId": 65
 },
 {
  "itemName": "test4",
  "produceDate": 1490611140000,
  "produceId": 65
 },
 {
  "itemName": "test5",
  "produceDate": 1490352067000,
  "produceId": 65
 },
  {
  "itemName": "test6",
  "produceDate": 1490271418000,
  "produceId": 65
 },
  {
  "itemName": "test7",
  "produceDate": 1489828994000,
  "produceId": 65
 }
 ]

 })

 .filter('dateRange', function() {
    var formatStr = 'DD/MM/YYYY';
    return function(produceList, fromDate, toDate) {    
      if(fromDate && toDate){
        var filtered = [];
        angular.forEach(produceList, function(items) {
          console.log('a',items.produceDate)
                              console.log(Date.parse(moment(fromDate, formatStr)))
            if (items.produceDate > Date.parse(moment(fromDate, formatStr)) && items.produceDate < Date.parse(moment(toDate, formatStr)))
                filtered.push(items);
        });
        return filtered;
      }
      else
        return produceList;
}})
</script>

</body>
</html>

Here is a Working DEMO

使用 angularjs 过滤两个选定日期之间的 table 数据时出现问题

Trouble in filter table data between two selected dates using angularjs

html

angularjs

angularjs-ng-repeat

custom-directive