Угловой JS: Как применить фильтр диапазона дат между двумя датами в одном столбце

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> 

Угловые 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> 

Пожалуйста, мне советы, где я собираюсь wrong.Please предложить me.thanks заранее.

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} работать как сравнение «полного» значения с состоянием сбора данных.

dateRange:Customfilterobj.StartScheuleDate:Customfilterobj.EndScheuleDate": dateRange - это настраиваемый фильтр для сравнения Expiration_date между StartDate и EndDate.

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 плункер. Его процесс имеет небольшую проблему в использовании углового фильтра $. Я обновленный здесь:

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; 
    }); 
    }; 
}); 

Проблема в том, что функция вход в функцию $ фильтровальной была третьи парами, и перебирает каждый атрибут каждого объекта в список. Консоль регистрирует свой плункер, называя момент() на каждый атрибут каждого объекта. Вместо того, чтобы вводить функцию в качестве второго параметра в качестве выражения вместо компаратора, мы можем вызвать сравнение только в поле даты.

Угловая документ: https://docs.angularjs.org/api/ng/filter/filter