How to filter data by date range in angularjs?

Question

I'm new to angularjs and I could n't find any COMPLETE solution for filtering data with date range picker in angular. Following code is what I did after spending 2 days for searching. What i want is to filter following data based on their release date by using date range picker.

HTML:

 <!DOCTYPE HTML>
    <html ng-app="example">
        <head lang="en">
            <meta charset="utf-8">
            <title>Example</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">

            <script src="js/jquery-1.11.3.min.js"></script>
            <script src="js/angular.js"></script>
            <script src="js/moment.min.js"></script>
            <script src="js/daterangepicker.js"></script>
            <script src="js/angular-daterangepicker.min.js"></script>
            <script src="js/bootstrap.min.js"></script>

            <script src="app/app.js"></script>

            <link href="css/bootstrap.min.css" rel="stylesheet">
            <link href="css/daterangepicker.css" rel="stylesheet">
        </head>
        <body ng-controller="mainController as vm" >
            <br><br>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <h3>Product List</h3>
                            </div>
                            <div class="row">
                                <br>
                                <div class="col-lg-3 text-right">
                                    <h4>Filter by date :</h4>
                                </div>
                                <div class="col-lg-6">
                                    <input date-range-picker name="daterange3" 
                                           class="form-control date-picker" type="text"
                                           ng-model="date" options="opts" clearable="true" required/>
                                </div>
                            </div>
                            <div class="panel-body">
                                <table  class="table table-responsive">
                                    <thead>
                                        <tr>
                                            <th>Product</th>
                                            <th>Code</th>
                                            <th>Availabel</th>
                                            <th>Price</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="product in vm.products">
                                            <td>{{product.productName}}</td>
                                            <td>{{product.productCode}}</td>
                                            <td>{{product.releaseDate | date }}</td>
                                            <td>{{product.price | currency}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </body>
    </html>

App.js

    (function (){
    "use strict";
    angular
        .module("example",["daterangepicker"])
        .controller("mainController",["$scope",mainController]);


    function mainController($scope)
    {
        var vm = this;

        vm.products = [
            {
                "productId": 1,
                "productName": "Leaf Rake",
                "productCode": "GDN-0011",
                "releaseDate": "2015-12-15T22:00:00.000Z",
                "description": "Leaf rake with 48-inch wooden handle.",
                "cost": 9.00,
                "price": 19.95,
                "category": "garden",
                "tags": ["leaf", "tool"],
            },
            {
                "productId": 2,
                "productName": "Garden Cart",
                "productCode": "GDN-0023",
                "releaseDate": "2015-12-16T22:00:00.000Z",
                "description": "15 gallon capacity rolling garden cart",
                "cost": 20.00,
                "price": 32.99,
                "category": "garden",
                "tags": ["barrow", "cart", "wheelbarrow"],
            },
            {
                "productId": 5,
                "productName": "Hammer",
                "productCode": "TBX-0048",
                "releaseDate": "2015-12-17T22:00:00.000Z",
                "description": "Curved claw steel hammer",
                "cost": 1.00,
                "price": 8.99,
                "category": "toolbox",
                "tags": ["tool"],
            },
            {
                "productId": 8,
                "productName": "Saw",
                "productCode": "TBX-0022",
                "releaseDate": "2015-12-18T22:00:00.000Z",
                "description": "15-inch steel blade hand saw",
                "cost": 6.95,
                "price": 11.55,
                "category": "garden",
                "tags": ["garden", "mower"],
            },
            {
                "productId": 10,
                "productName": "Video Game Controller",
                "productCode": "GMG-0042",
                "releaseDate": "2015-12-19T22:00:00.000Z",
                "description": "Standard two-button video game controller",
                "cost": 2.22,
                "price": 35.95,
                "category": "gaming",
                "tags": ["gaming", "controller", "video game"],
            }
        ];
        $scope.date={
            startDate: moment().subtract(1, "days"),
            endDate: moment()
        };
        $scope.date2={
            startDate: moment().subtract(1, "days"),
            endDate: moment()
        };
        $scope.opts={
            ranges: {
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()]
            }
        };
        $scope.setStartDate = function () {
            vm.date.startDate = moment().subtract(4, "days");
        };
        $scope.setRange = function () {
            vm.date = {
                startDate: moment().subtract(5, "days"),
                endDate: moment()
            };
        };
        $scope.$watch('date', function(newDate) {
            console.log('New date set: ', newDate);
        }, false);
    }
}());

Thank you guys ...

Anchel Benedi · Accepted Answer · 2016-12-28 17:55:37Z

I had the same issue with inputs and this was my solution:

In HTML I use two date inputs

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

In app.js:

    app.filter("dateFilter", function() {
       return function datefilter(items, from, to) {
       var result = [];
       angular.forEach(items, function(value){
           if (Date.parse(value.date) > Date.parse(from) && Date.parse(to) > Date.parse(value.date))  {
               result.push(value);
            }
        });
        return result;
        };
    });

In the controller I set the inputs to the last month:

    $scope.from = new Date();
    $scope.from.setMonth($scope.from.getMonth()-1);
    $scope.to = new Date();

And in ng-repeat

        <tr ng-repeat="item in items | dateFilter:from:to">
            <td>{{item.name}}</td>
            <td>{{item.date}}</td>
        </tr>

That is working for me, I hope to be usefull.

user5698801 · Accepted Answer · 2015-12-22 12:50:47Z

1

In angular, you can user pipeline operator to chain the operations. As belows,

<tr ng-repeat="product in vm.products | filter:date as results">

The complete document please refer to https://docs.angularjs.org/api/ng/directive/ngRepeat

answered Dec 22, 2015 at 12:50

user5698801

5744 silver badges10 bronze badges

2 Comments

MOSH Over a year ago

thank you for your answer but I think you did not understand what I want. there is no problem with ng-repeat. what I need is different

user5698801 Over a year ago

Sorry about that. Another approach is filter the result in your controller. As you have already watch the "date" variable, you can change the result manually everytime the 'date' variable change inside $watch. codes like: vm.product = _.filter(vm.product, function(prod) {prod.releaseDate = date}) .

Collectives™ on Stack Overflow

How to filter data by date range in angularjs?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related