CODEWITHSUNDEEP
javascriptangularjsfilter
code.cycling
code.cycling

Reputation: 1274

Date range filter not working

I can't seem to make this date range filter to work ? when i pick a date it seems to trigger but its not pushing anything in the var filter

I already tackled this problem for hours and its going nowhere.

html

<div class="form-group">
   <input type="date" class="form-control" ng-model="from">
</div>
<div class="form-group">
   <input type="date" class="form-control" ng-model="to">
</div>

ng-repeat

<tr ng-repeat="attendance in displayedCollection | dateRange:from:to ">
 <td>{{ attendance.day | date: 'EEEE, MMM d'}}</td>
 <td>{{ attendance.timeIn | date:'h:mm a' }}</td>
 <td>{{ attendance.timeOut | date:'h:mm a'}}</td>
 <td class="text-capitalize">
 <i class="fa fa-map-marker" aria-hidden="true"></i> {{ attendance.details }}</td>
 <td>{{ attendance.totalHrs | date:'hh:mm'}} </td>
</tr>

controller

.filter('dateRange', function () {
  return function (product, fromDate, toDate) {
    var filtered = [];

    if (!fromDate && !toDate) {
      return product;
    }

    var from_date = Date.parse(fromDate);
    var to_date = Date.parse(toDate);

    angular.forEach(product, function (item) {
      if (item.day > from_date && item.day < to_date) {
        filtered.push(item); //not pushing anything
      }
    });
    return filtered; // returning nothing
  };
})

EDIT:

displayedCollection Data

[{
    "_id": "5a03bed5c349e82fa4937430",
    "details": "MHQ Lucena Branch 2",
    "fullName": "Priz almarinez",
    "timeIn": "2017-11-09T02:34:57.000Z",
    "attendance": "admin11-09-2017",
    "day": "2017-11-08T16:00:00.000Z",
    "user": "admin",
    "__v": 0,
    "status": "Pending",
    "check": false
},
{
    "_id": "5a03c4e61bebc52c0737a426",
    "details": "MHQ Lucena Branch 2",
    "fullName": "Priz almarinez",
    "timeIn": "2017-11-09T02:34:57.000Z",
    "attendance": "admin11-09-2017",
    "day": "2017-11-09T16:00:00.000Z",
    "user": "admin",
    "__v": 0,
    "status": "Pending",
    "check": false
},
{
    "_id": "5a03c4ec1bebc52c0737a427",
    "details": "MHQ Lucena Branch 2",
    "fullName": "Priz almarinez",
    "timeIn": "2017-11-09T02:34:57.000Z",
    "attendance": "admin11-09-2017",
    "day": "2017-11-10T16:00:00.000Z",
    "user": "admin",
    "__v": 0,
    "status": "Pending",
    "check": false
}]

Thanks

Upvotes: 0

Views: 298

Answers (1)

user8701049
user8701049

Reputation:

You are currently comparing your item.day TimeString ("2017-11-10T16:00:00.000Z") , to a parsed date Integer. Parse the item.day in your forEach loop and compare. Works as expected. Heres a link to a working sample https://codepen.io/pablo-tavarez/pen/pdRvjW?editors=0010

Upvotes: 1

Related Questions