AngularJS date filter in range by two inputs

Question

I want to display data in range of date by two inputs of date. (AngularJS date filter in range by two inputs)

Here is my code

 var app = angular.module('app',[]).controller('ctrl1', function($scope){
            $scope.record = [
                 {uniqueID : 'pp-12', Name : 'Jim', status : 'Approved', Date:'05/01/2015' },
                 {uniqueID : 'pp-11', Name : 'Jim', status : 'Canceled', Date:'05/02/2015' },
                 {uniqueID : 'pp-45', Name : 'Nick', status : 'Pending', Date:'05/03/2015' },
                 {uniqueID : 'pp-32', Name : 'Thomas', status : 'Canceled', Date:'05/04/2015' },
                 {uniqueID : 'pp-01', Name : 'Thomas', status : 'Pending', Date:'05/05/2015' },
                 {uniqueID : 'pp-09', Name : 'Nick', status : 'Approved', Date:'05/06/2015' },
                 {uniqueID : 'pp-23', Name : 'Lina', status : 'Requested', Date:'05/07/2015'},
                 {uniqueID : 'pp-39', Name : 'Jim', status : 'Pending', Date:'05/08/2015' }
            ];
         });

  <input type="text" class="form-control" name="to" ng-model="to">
  <input type="text" class="form-control" name="from" ng-model="from"> 
        <table border="1">
            <thead>
            <tr>
                <td>Unique ID</td>
                <td>Name</td>
                <td>Status</td>
                <td>Date</td>
            </tr>
            </thead>

            <tbody>
            <tr ng-repeat="data in  record">
                <td> {{data.uniqueID}}</td>
                <td> {{data.Name}}</td>
                <td> {{data.status}}</td>
                <td> {{data.Date}}</td>
            </tr>
            </tbody>
        </table>

Thanks is advance.

Numyx · Accepted Answer · 2015-06-13 08:55:23Z

1

You can define a custom filter for that purpose that filters the record array and returns an array with all entries between the given dates:

.filter('dateRange', function() {
    return function(records, from, to) {
        return records.filter(function(record) {
            return record.Date >= from && record.Date <= to;
        });
    }
})

<tr ng-repeat="data in  record | dateRange : from : to">

Plunker: http://plnkr.co/edit/smpnaDtY3vPmdCuw20bT?p=preview

PS: you should add a track by record.uniqueID to the ng-repeat.

edited Jun 13, 2015 at 8:55

answered Jun 13, 2015 at 8:49

Numyx

1,7582 gold badges11 silver badges16 bronze badges

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

5 Comments

Assad zakir Over a year ago

Hi thank you for your response in this example list data is not showing until i choose date.

Numyx Over a year ago

That's right, depending on what you wan't to do if from or to (or both) are not defined, you can simply adjust the line return record.Date >= from && record.Date <= to; accordingly. You should also think about invalid user inputs.

Anuj Over a year ago

I created one pen codepen.io/anujsphinx/pen/OpJrOm . Why is it not working ?

Anuj Over a year ago

Any idea @Numyx :(

Numyx Over a year ago

Looks like your to value is just less than your from value, codepen.io/anon/pen/WpbvVV

darkstalker_010 · Accepted Answer · 2015-06-13 09:31:18Z

1

If you want all the records if user has not enter the from and to dates then change you filter to this:

.filter('dateRange', function() {
    return function(records, from, to) {
        return records.filter(function(record) {
            if(from && to)
                return record.Date >= from && record.Date <= to;
            else
                return record.Date;
        });
    }
})

edited Jun 13, 2015 at 9:31

answered Jun 13, 2015 at 9:24

darkstalker_010

4433 silver badges13 bronze badges

Collectives™ on Stack Overflow

AngularJS date filter in range by two inputs

Here is my code

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Here is my code

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related