javascriptangularjsangular-filtersng-filterangular-daterangepicker

Angular Date Range Filter Not Working


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

Solution

  • 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>