How to filter with date range with AngularJS?

Question

I'm trying to filter an ng-repeat using a date range.

So far I've installed the Daterangepicker and it will return an object with two properties (startDate and endDate) in the ng-model of the input that triggers the picker (ng-model="dates").

It looks like this:

Object
   endDate: 
     k_d: Mon Nov 03 2014 23:59:59 GMT+0300 (E. Africa Standard Time)
     _isAMomentObject: true
     _isUTC: false
     _isValid: true
     _locale: j
     _pf: Object_
     _proto__: k
 startDate: k_d: Sat Oct 04 2014 00:00:00 GMT+0300 (E. Africa Standard Time)
     _isAMomentObject: true
     _isUTC: false 
     _isValid: true
     _locale: j
     _pf: Object_
     _proto__: k

On the other hand I have my ng-repeat, that lists an array of objects, each one of them with a date property.

<div class="row msf-row" 
     ng-repeat="record in recordlist | filter:dateFilter | limitTo : -100">
      <div class="col-md-1">{{record.date}}</div>
</div>

I've built a filter to try to filter it by range:

$scope.dateFilter = function (record) {
    return record.date >= $scope.dates.startDate && record.date <= $scope.dates.endDate;
};

But so far the filter is not working. What am I missing?

EDIT

I've realized that record.date is a string while startDate and endDate are moment() objects. Is there any way I could parse record.date into a moment() object before the filter function?

EDIT 2

Fixed it! I had to parse the result.date as a momentjs object, and also to include the proper format like this: moment(string, format):

$scope.dateFilter = function (record) {
    return 
       moment(record.date, "DD[/]MM[/]YYYY") >= $scope.dates.startDate 
       && 
       moment(record.date, "DD[/]MM[/]YYYY") <= $scope.dates.endDate;
};

Nripendra · Accepted Answer · 2014-11-03 16:32:16Z

3

Looking at your date object, it seems like it is not of JavaScript native 'Date' type. May be something on this line works?

$scope.dateFilter = function (record) {
    var startDate = new Date($scope.dates.startDate.k_d);
    var endDate = new Date($scope.dates.endDate.k_d);

    return record.date >= startDate && record.date <= endDate;
};

Sharing a jsfiddle may be more helpful to figure out exact issue.

answered Nov 3, 2014 at 16:32

Nripendra

3596 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eric Mitjans Over a year ago

Actually you're right. startDate and endDate are moment() instances, but record.date is a string. Could I parse it as a moment() somehow?

Nripendra Over a year ago

I haven't used moment.js before, but looking at their API, you can do something like $scope.dates.startDate.format() to convert moment to date string. Or, you can use moment constructor e.g moment(record.date) to convert date string to moment.

Collectives™ on Stack Overflow

How to filter with date range with AngularJS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related