Как фильтровать данные с использованием даты в угловых js?

Question

У меня есть список имен учеников & Я хочу отфильтровать имена, используя две даты.

Я две даты сборщиков один за другим from date один для to date .if пользователя выбрать 2015-10-19 как from date и 2015-10-20 в to date, то имя списка должен показать между этими двумя датами.

пример пользователя, выбранные выше даты

список должен быть

1. Рамеш
2. Вигнеш
3. Sarath
4. Gomal

Я добавил мой код ниже некоторого можно выручи меня .

<!--begin snippet: js hide: false --> 

<!--language: lang-js --> 

angular.module("date", []) 
    .directive("datepicker", function() { 
    return { 
     restrict: "A", 
     link: function (scope, el, attr) { 
      el.datepicker({ 
          dateFormat: 'yy-mm-dd' 
         }); 
     } 
    }; 
}) 
.directive("datepicker1", function() { 
    return { 
     restrict: "A", 
     link: function (scope, el, attr) { 
      el.datepicker({ 
          dateFormat: 'yy-mm-dd' 
         }); 
     } 
    }; 
}) 
    .controller("dateCtrl", function ($scope) { 

    $scope.names= [{ 

     id: "1", 
     C_Name: "Ramesh", 
     C_Phone: "*******", 
     C_Option: { 
     "date": { 
      "$date": "2015-10-19T09:52:26.507Z" 
     } 
     } 

    }, { 
     id: "2", 
     C_Name: "Suresh", 
     C_Phone: "*****", 
     C_Option: { 
     "date": { 
      "$date": "2015-10-21T09:52:26.507Z" 
     } 
     } 

    }, { 
     id: "3", 
     C_Name: "Vignesh", 
     C_Phone: "*******", 
     C_Option: { 
     "date": { 
      "$date": "2015-10-20T09:52:26.507Z" 
     } 
     } 

    }, 
    { 
     id: "4", 
     C_Name: "Sarath", 
     C_Phone: "******", 
     C_Option: { 
     "date": { 
      "$date": "2015-10-20T09:52:26.507Z" 
     } 
     } 

    }, 

    { 
     id: "5", 
     C_Name: "Sundhar", 
     C_Phone: "******", 
     C_Option: { 
     "date": { 
      "$date": "2015-10-21T09:52:26.507Z" 
     } 
     } 

    }, 

    { 
     id: "6", 
     C_Name: "Rajesh", 
     C_Phone: "******", 
     C_Option: { 
     "date": { 
      "$date": "2015-10-18T09:52:26.507Z" 
     } 
     } 

    }, 
    { 
     id: "7", 
     C_Name: "Gomal", 
     C_Phone: "******", 
     C_Option: { 
     "date": { 
      "$date": "2015-10-20T09:52:26.507Z" 
     } 
     } 

    } 


    ] 




}); 

<!-- language: lang-html --> 

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> 
<div ng-app="date"> 
<div ng-controller="dateCtrl"> 
    <!-- jq --> 

    <!-- ng --> 
    From Date:<input type="text" datepicker ng-model="date2" /> 
    <span>{{date2}}</span> 
    To Date:<input type="text" datepicker1 ng-model="date3" /> 
    <span>{{date3}}</span> 
    <br><br><br> 
    <label>List Of Names</label> 

     <br> 


     <div ng-repeat="name in names | filter:search" > 
      <br>{{name.C_Name}} 
      <br> 



     </div> 
</div> 
</div> 

<!-- end snippet --> 

demo @ JSFiddle

Answer 1

Working Fiddle:

Изменение в HTML:

<div ng-repeat="name in names | myfilter:date2:date3" > 

Изменение JavaScript: Добавить следующий пользовательский фильтр

moduleName.filter("myfilter", function() { 
    return function(items, from, to) { 

    var arrayToReturn = [];   
    for (var i=0; i<items.length; i++){ 

     var test = new Date(items[i].C_Option.date.$date); 
     var month = test.getMonth()+1; 
     var date = test.getDate(); 
     var year = test.getFullYear(); 
     var newDate = year+"-"+month+"-"+date    
     if (newDate>= from && newDate <= to)    { 
      arrayToReturn.push(items[i]); 
     } 
    } 

     return arrayToReturn; 
    }; 
}) 

Источник: https://stackoverflow.com/a/25521779/3186722

Answer 2

var nameSpace = angular.module('tst',[]); 
 

 
nameSpace.controller('MyController', function MyController($scope) { 
 
    $scope.date1 = "27-05-2010" 
 
    $scope.date2 = "29-07-2015"; 
 
    $scope.orders = [ 
 
    { 
 
    "date1": 1306487800, 
 
    "date2": 1406587800 
 
    }, 
 
    { 
 
    "date1": 1196487800, 
 
    "date2": 1406597800 
 
    }] 
 
}); 
 

 
// parse a date in dd-mm-yyyy format 
 
function parseDate(input) { 
 
    var parts = input.split('-'); 
 
    // Note: months are 0-based 
 
    return new Date(parts[2], parts[1]-1, parts[0]); 
 
} 
 

 
nameSpace.filter("myfilter", function() { 
 
    return function(items, from, to) { 
 
     var df = parseDate(from); 
 
     var dt = parseDate(to); 
 
     var arrayToReturn = [];   
 
     for (var i=0; i<items.length; i++){ 
 
      var tf = new Date(items[i].date1 * 1000), 
 
       tt = new Date(items[i].date2 * 1000); 
 
      if (tf > df && tt < dt) { 
 
       arrayToReturn.push(items[i]); 
 
      } 
 
     } 
 
     
 
     return arrayToReturn; 
 
    }; 
 
});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> 
 
<div ng-app="tst"> 
 
<div ng-controller="MyController"> 
 
    <table> 
 
       <tr> 
 
        <td>From:<input ng-model="date1" type="text" placeholder="" /></td> 
 
         <td>To:<input ng-model="date2" type="text" placeholder="" /></td> 
 
       </tr> 
 

 
       <tr ng-repeat="order in orders | myfilter:date1:date2"> 
 
        <td>{{order.date1 * 1000 | date:'dd-MM-yyyy'}}</td> 
 
        <td>{{order.date2 * 1000 | date:'dd-MM-yyyy'}}</td> 
 
       </tr> 
 
    </table> 
 
</div> 
 
</div>

Answer 3

Вам нужно создать пользовательскую функцию фильтра для этой функции и сравнить дату записи против начала и конца дата, введенная пользователем.

Im, используя moment.js для сравнения по датам, поскольку это лучшая библиотека для сравнения дат.

HTML КОД:

<div ng-repeat="name in names | filter: dateRangeFilter('C_Option', date2, date3)"> 
    <br>{{name.C_Name}} 
    <br> 
    </div> 
    <span>{{resultsCount}} records returned</span> 

Jquery КОД:

$scope.dateRangeFilter = function(property, startDate, endDate) { 
    return function(item) { 
     $scope.resultsCount = 0; 
     if (item[property] === null){ 
      return false; 
     } 
     var localEndDate =''; 
     if(typeof endDate === 'undefined'){ 
      localEndDate = moment(new Date(),"DD-MM-YYYY") +'T23:59:59.000Z'; 
     }else{ 
     localEndDate = endDate + 'T23:59:59.000Z'; 
     } 

     var currentDate = moment(item[property].date.$date, "DD-MM-YYYY"); 
     var s = moment(startDate, "DD-MM-YYYY"); 
     var e = moment(localEndDate, "DD-MM-YYYY"); 
     if (currentDate >= s && currentDate <= e) { 
      $scope.resultsCount++; 
      return true; 
     } 
     return false; 
    } 
    } 

Live Demo @ JSFiddle

Update: Код обновлен, чтобы показать количество записей после фильтра.