html - 使用angularjs在两个选定日期之间过滤表数据时出现问题

Question

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

生产 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" />

请检查转换后的日期值。当转换为数字格式时，produceDate 不位于开始日期和结束日期之间。因此此处不会进行过滤。

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>