Date range filter not working

Question

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

Have you tried any debugging? Even some `console.log` calls would help — Phil, Nov 09 '17 at 03:01
@Phil `item.day` is a date i tried logging from_date and to_date and seemed to be right. — code.cycling, Nov 09 '17 at 03:03
But is it string or date object? Create a demo that reproduces problem. Also have you verified what `Date.parse()` is returning? — charlietfl, Nov 09 '17 at 03:05
based on the json you posted, `item.day` is a string, and can't be compared to a date object. try converting `item.day` to a date before the comparison. — Claies, Nov 09 '17 at 03:16
So you are comparing date object to string...convert `day` to new Date — charlietfl, Nov 09 '17 at 03:16

score 1 · Accepted Answer · answered Nov 09 '17 at 03:47

1

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

answered Nov 09 '17 at 03:47

its working now but why is the displayedCollection.length not changing ? – code.cycling Nov 09 '17 at 05:06
Because the original `displayedCollection` is still intact. The filter created a **copy** and filtered the copy. Here's a link to the answer you seek. https://stackoverflow.com/questions/15316363/how-to-display-length-of-filtered-ng-repeat-data – Nov 09 '17 at 05:42

Date range filter not working

1 Answers1