AngularJS model filter with date range filter

Question

I have in the view:

<tr dir-paginate="post in posts |orderBy:propertyName:reverse | filter: searchPost | itemsPerPage: pageSize">
<td>
        {{post.title}}
</td>
<td>
        {{post.content}}
</td>
<td>
        {{post.dateOfCreation | date:"medium"}}
</td>
</tr>

I also have filtering, which works on all the fields:

     <div>
        <input type="text" placeholder="Find by title..." ng-model="searchPost.title" />
    <div>
    <div>
        <input type="text" placeholder="Find by content..." ng-model="searchPost.content" />
    </div>

    <div>
        <input type="text" placeholder="Find by date..." ng-model="searchPost.dateOfCreation" />
    </div>

However, the date is filtered only when I type the date in format: yyyy-mm-dd in the textbox, so basically it works for only 1 date. My goal is to make possible for user to choose date range and show these values, however, I cannot make it work together with my searchPost filter... I am using angular-datepicker:

<input date-range-picker class="form-control date-picker" type="text" ng-model="someDate" options = "{locale: {format: 'YYYY-MM-DD'}}"/>

   $scope.someDate = { startDate: null, endDate: null };

Datepicker which I am using is: Angular Daterangepicker

`angular-datepicker` does not seem to have a `date-range-picker`, are you missing something here or is your issue description incomplete (missing the `date-range-picker` plugin you are using)? — Piou, Jan 11 '17 at 22:05
@Piou I am using this one: https://github.com/fragaria/angular-daterangepicker — Pawel, Jan 11 '17 at 22:11
Mind the dot: https://github.com/fragaria/angular-daterangepicker#mind-the-dot — Piou, Jan 11 '17 at 22:16
I tried also with dot, my problem is rather lack of knowledge how to join work of these 2 filters, not using this datepicker itself — Pawel, Jan 11 '17 at 22:38
searchPost does not have any code. The implementation is just as I wrote above. It is simple filter, like e.g. here [link](http://stackoverflow.com/questions/14733136/ng-repeat-filter-by-single-field) — Pawel, Jan 11 '17 at 22:53

score 1 · Answer 1 · edited Jan 18 '17 at 16:31

You will need to implement a custom filter to do so.

The custom filter will take care of checking if the post creation date is between the start date and end date of the range selected.

In the end it will look like something like this:

// Setup the filter
var app = angular.module('testFilters', []);

app.controller('postsCtrl', ['$scope',function($scope){
  $scope.posts = [
    {title: 'test 2010', dateOfCreation: new Date(2010, 1, 1)},
    {title: 'test 2012', dateOfCreation: new Date(2012, 1, 1)},
    {title: 'test 2014', dateOfCreation: new Date(2014, 1, 1)},
    {title: 'test 2016', dateOfCreation: new Date(2016, 1, 1)}
  ];
  
  $scope.searchPost = {title: 'test', date: {startDate: new Date(2011, 1, 1), endDate: new Date(2015, 1, 1) } };
}]);

app.filter('postFilter', function() {

  // Create the return function and set the required parameter name to **input**
  return function(input, post) {

    var out = [];

    angular.forEach(input, function(p) {
      var filtered = true;
      
      // checking if we should check the title and cehcking
      // you may want to pass everything to lowercase for best search results
      if(post.title && p.title.indexOf(post.title) < 0){
        filtered = false;
      }
      
      // same for the content
      if(post.content && p.content.indexOf(post.content) < 0){
        filtered = false;
      }
      
      // checking the date of creation against the date range
      if(post.date && post.date.startDate && post.date.endDate){
        if(p.dateOfCreation < post.date.startDate || p.dateOfCreation > post.date.endDate){
          filtered = false
        }
      }
      
      // adding the post to the resulting array
      if(filtered){
        out.push(p);
      }
    });

    return out;
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="testFilters" ng-controller="postsCtrl">
  <h3>unfiltered posts:</h3>
  <div ng-repeat="post in posts">
    ----------------------------------------------------<br>
    Title: {{post.title}}<br>
    Content: {{post.content}}<br>
    Created: {{post.dateOfCreation | date:'MM/dd/yyyy'}}<br>
  </div>
  <hr>
  <br>
  <h3>filtering post:</h3>
  <div>
    Title: {{searchPost.title}}<br>
    Content: {{searchPost.content}}<br>
    Range: {{searchPost.date.startDate | date:'MM/dd/yyyy'}} - {{searchPost.date.endDate| date:'MM/dd/yyyy'}}<br>
  </div>
  <hr>
  <br>
  <h3>filtered posts:</h3>
  <div ng-repeat="post in posts | postFilter:searchPost">
    ----------------------------------------------------<br>
    Title: {{post.title}}<br>
    Content: {{post.content}}<br>
    Created: {{post.dateOfCreation | date:'MM/dd/yyyy'}}<br>
  </div>
</div>

thanks, but this does not work - when I change filter to e.g. "aaaa", it still shows results filtered only by date. — Pawel, Jan 17 '17 at 21:58
It actually works, you made only one mistake `if (post.title && p.title.indexOf(post.title) < 0) { filtered = false; } // same for the content if (post.content && p.content.indexOf(post.content) < 0) { filtered = false;` — Pawel, Jan 17 '17 at 22:23

AngularJS model filter with date range filter

1 Answers1