Angular Date Range Filter Not Working

Question

I'm trying to figure out why my date range filter is not working and I get thrown the error - [$injector:unpr] Unknown provider: dateRangeProvider <- dateRange <- dashboardController. I tried putting the 'dateRange' in my dependencies and $filter, not sure if what I did was correct or not. Any help is definitely appreciated! Thanks!

My HTML that I am trying to filter between two dates to grab the id of the products

<input style="width:200px; padding:10px; border-radius:4px;"type="text" placeholder="search name" ng-model='productFilter'>
<input type="date" ng-model="to_date">
<input type="date" ng-model="from_date">
<div ng-repeat="product in products | dateRange : from_date : to_date | filter: productFilter track by $index">
  <p>Total Inputs: {{product.createdAt}}{{product._id}}</p>
</div>

This is my DashboardController

app.controller('dashboardController', ['$scope', '$filter', 'OpFactory', function($scope, $filter, OpFactory){

function getProducts(){
  OpFactory.getProducts(function(data){
   $scope.products = data;
   console.log("data from getProducts function in dashboardcontroller", data);
 })
}
getProducts();

$filter('dateRange', function() {
       return function( product, fromDate, toDate ) {
           var filtered = [];
           console.log(fromDate, toDate);
           var from_date = Date.parse(fromDate);
           var to_date = Date.parse(toDate);
           angular.forEach(product, function(item) {
               if(item.completed_date > from_date && product.completed_date < to_date) {
                   filtered.push(item);
               }
           });
           return filtered;
       };
   });
}]);

Canastro · Accepted Answer · 2017-02-14T09:54:27.773

There were a few issues, but the main issue is how you created the filter. the filter should be appended to your module something like angular.module('mymodule', []).filter('dateRange', fn).

Other then that you have to deal with what you want to render when the filters are not yet fully filled, and you had product.completed_date instead of item.completed date in your filter function.

Here you have a example working (just missing how you want to handle when the input filters are not yet fully filled):

angular.module('webapp', [])
        .filter('dateRange', function () {
             return function(product, fromDate, toDate) {
                 var filtered = [];
                 console.log(fromDate, toDate);
               
                 if (!fromDate && !toDate) {
                     return product;
                 }
                 
                 var from_date = Date.parse(fromDate);
                 var to_date = Date.parse(toDate);
                 angular.forEach(product, function(item) {
                     if (item.createdAt > from_date && item.createdAt < to_date) {
                         filtered.push(item);
                      }
                  });
               
                  return filtered;
             };
        })
        .controller('dashboardController', ['$scope', '$filter', '$timeout', function($scope, $filter, $timeout) {

            $scope.products = [];

            function getProducts() {
                $timeout(function() {
                    $scope.products = [{
                        _id: 1,
                        createdAt: new Date(2000, 1, 1)
                    }, {
                        _id: 2,
                        createdAt: new Date(2001, 1, 1)
                    }, {
                        _id: 3,
                        createdAt: new Date(2002, 1, 1),
                    }, {
                        _id: 4,
                        createdAt: new Date(2003, 1, 1)
                    }];
                }, 500);
            }

            getProducts();
        }]);

<!DOCTYPE html>
    <html ng-app="webapp">
        <head>
            <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
        </head>
        <body ng-app="webapp">
            <div ng-controller="dashboardController">
                <input style="width:200px; padding:10px; border-radius:4px;"type="text" placeholder="search name" ng-model='productFilter'>
                <input type="date" ng-model="from_date">
                <input type="date" ng-model="to_date">
                <div ng-repeat="product in products | dateRange : from_date : to_date | filter: productFilter track by $index">
                    <p>Total Inputs: {{product.createdAt}} :: {{product._id}}</p>
                </div>
            </div>
        </body>
    </html>

Hey Canastro! Thank you so much for educating me on that, I didnt realize i had to do that and it makes sense that I have to append to my module. So in my app.js I actually gave my angular module a var of app. So i basically just did app.filter and it doesn't throw an error. However, I changed the filter function to your specifications and it still isn't filtering by the dates... trying to filter by when it was created at, the "createdAt". — Dustin Lee, Feb 14 '17 at 08:56
Have you changed the places where I left as `completed_date` to `created_at`? — Canastro, Feb 14 '17 at 09:09
Yes, I did change it to created_at and it's not filtering yet, but it does filter for the first input value where you track by $index. So I console.log() right before 2nd if statement and in the chrome console it shows it does enter the forEach function but then I console.log inside the 2nd if statement and it never prints what is in the console.log. It seems like it never enters that 2nd if statement — Dustin Lee, Feb 14 '17 at 09:43
Just updated the sample to use createdAt and made this small video: https://monosnap.com/file/sBcDEuyUxqUIggKMoEhTkvvvwfTIIu everything seems to work as expected :\ — Canastro, Feb 14 '17 at 09:57
Thanks @canastro i had to add a little more to make it completely work! But your solution definitely helped me get on the right track. — Dustin Lee, Feb 15 '17 at 09:16

score 0 · Answer 2 · answered Feb 16 '17 at 07:38

Here is the answer I came up with, for others that are interested as well.

app.filter('dateRange', function () {
 return function(product, fromDate, toDate) {
     var filtered = [];
     console.log(fromDate, toDate, filtered);

     if (!fromDate && !toDate) {
         return product;
     }

     var from_date = Date.parse(fromDate);
     var to_date = Date.parse(toDate);
     angular.forEach(product, function(item) {
       console.log('in the forEach function')
       var createdAt = Date.parse(item.createdAt);
         if (from_date && to_date && createdAt > from_date && createdAt < to_date) {
           console.log('in the if statement', filtered)
           filtered.push(item);
         }
     })

    return filtered;

 };
})

My HTML Table

<table class="receivingDataTable" datatable='ng' style="width: 1000px;">
 <tr>
    <th>Date</th>
    <th>Container #</th>
    <th>Cut #</th>
    <th>CTNS #</th>
    <th>Pieces</th>
    <th>Receiving #</th>
    <th>Remarks</th>
  </tr>
  <tr ng-repeat="product in filtered = (products | dateRange: from_date : to_date)">
    <td>{{product.createdAt | date: "MM/dd/yyyy"}}</td>
    <td>{{product.container_number}}</td>
    <td>{{product.cut_number}}</td>
    <td>{{product.ctns_number}}</td>
    <td>{{product.pieces}}</td>
    <td>{{product._id}}</td>
    <td>{{product.remarks}}</td>
  </tr>
</table>

Angular Date Range Filter Not Working

2 Answers2