Implementing date range filtering in AngularJS model using filters

Question

Implementing date range filtering in AngularJS model using filters

Within my view, I have the following:

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

Furthermore, I have implemented filtering across all 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 only filters correctly when entered in the format: yyyy-mm-dd in the textbox; limited to a single date. I aim to allow users to select date ranges and display these values, yet I struggle to integrate this functionality with my existing searchPost filter... I am utilizing 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 };

The datepicker library in use is: Angular Daterangepicker

javascript angularjs date datepicker

Answer 1

Answer №1

To achieve this, you will have to develop a customized filter.

This custom filter will be responsible for validating whether the post was created within the specified date range.

Ultimately, the implementation will resemble the following code snippet:

// Initialize 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() {

  return function(input, post) {

    var out = [];

    angular.forEach(input, function(p) {
      var filtered = true;

      if(post.title && p.title.indexOf(post.title) < 0){
        filtered = false;
      }

      if(post.content && p.content.indexOf(post.content) < 0){
        filtered = false;
      }

      if(post.date && post.date.startDate && post.date.endDate){
        if(p.dateOfCreation < post.date.startDate || p.dateOfCreation > post.date.endDate){
          filtered = false
        }
      }

      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>

Answer 2

To achieve this, you will have to develop a customized filter.

This custom filter will be responsible for validating whether the post was created within the specified date range.

Ultimately, the implementation will resemble the following code snippet:

// Initialize 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() {

  return function(input, post) {

    var out = [];

    angular.forEach(input, function(p) {
      var filtered = true;

      if(post.title && p.title.indexOf(post.title) < 0){
        filtered = false;
      }

      if(post.content && p.content.indexOf(post.content) < 0){
        filtered = false;
      }

      if(post.date && post.date.startDate && post.date.endDate){
        if(p.dateOfCreation < post.date.startDate || p.dateOfCreation > post.date.endDate){
          filtered = false
        }
      }

      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>

Implementing date range filtering in AngularJS model using filters

Answer №1

Similar questions

What is the best way to have my sliding panel automatically close when I click outside of it?

Utilizing ElementRef in Ionic to load map into ngSwitch child scope

Can you explain the process of retrieving API information from a component directory with Next.js?

Is there a way in React to specify which properties to pass (and when to pass them) to child components based on the properties of the parent component?

Choose particular spreadsheets from the office software

The pagination in React using React Query will only trigger a re-render when the window is in

Iterating through children of the target element using the .each() method in jQuery

A step-by-step guide on incorporating box-shadow for the jackColor in the Switchery Plugin

Regarding passing input into a JavaScript class method that is exported through the exports keyword

Tips for incorporating a Forgot/Reset password option into your #Firebase platform

Animate my banner images only after they have fully loaded using Jquery

how to use jquery to indicate that a checkbox is selected

Having a tough time getting Storybook up and running

Include certain tags to the content within the text apart from using bbcode tags

(Enhancing Angular) Capture HttpResponse errors and seamlessly proceed with the Observable

Is there a way to turn off the highlights feature on MapHilight?

Preventing line breaks (endline) from PHP variable when passing to JavaScript

Guide on accessing APIs for individual elements in an array

Limited access textbox

I'm experimenting with crafting a new color scheme using MUI, which will dynamically alter the background color of my card based on the API