CODEWITHSUNDEEP
javascripthtmlangularjs
Assad zakir
Assad zakir

Reputation: 13

AngularJS date filter in range by two inputs

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.

Upvotes: 1

Views: 2170

Answers (2)

darkstalker_010
darkstalker_010

Reputation: 443

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;
        });
    }
})

Upvotes: 1

Numyx
Numyx

Reputation: 1758

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.

Upvotes: 1

Related Questions