Custom filter for comparing dates in angularjs

Question

I want to display only items from list that are between the two selected dates from input fields. This is my custom controller:

// Custom filter for comparing dates
snippet.filter('snippetsByDate', function(){
    return function(items, fromDate, toDate){
        var filtered = [];
        //here you will have your desired input
        var from_date = Date.parse(fromDate);
        var to_date = Date.parse(toDate);
        alert("From dateeeee " + from_date);
        angular.forEach(items, function(item) {
            if(Date.parse(item.created) >= from_date && Date.parse(item.created) <= to_date) {
                filtered.push(item);
            }
        });
        return filtered;
    };
});

The alert() in the filter's function is returning undefined for the variable fromDate and NaN for the variable from_date. This is how I call my filter:

<tr ng-repeat="s in snippets | filter:description | snippetsByDate : from_date : to_date">
                <td>{{s.description}}</td>
                <td>{{s.language}}</td>
                <td>{{s.url}}</td>
                <td>{{s.user}}</td>
</tr>

And my input fields are below this code (don't know if that metters) and look like this:

<label>Filter snippets by date</label><br>
<label>From: </label>
<input type="date" ng-model="from_date"><br>
<label>To: </label>
<input type="date" ng-model="to_date">

When I delete the custom filter from ng-repeat it is working fine, but with that it looks like I am getting empty list.

I should mention that in my class I have variable created as java.util.Date class.

Thank you in advance.

Vindhyachal Kumar · Accepted Answer · 2017-09-03 14:52:13Z

Please check this working code.

var snippet = angular.module('plunker', []);
    snippet.filter('snippetsByDate', function () {
        return function (items, fromDate, toDate) {
            var filtered = [];
            //here you will have your desired input
            var from_date = Date.parse(fromDate);
            var to_date = Date.parse(toDate);
            if (from_date == null || toDate == null)
                filtered = items;
            else
                filtered = items.filter(function (item) {
                    return item.created >= from_date && item.created <= to_date;
                });
            return filtered;
        };
    });
    snippet.controller('MainCtrl', function ($scope) {
        $scope.snippets = [];
        for (var i = 0; i < 11; i++) {
            $scope.snippets.push({
                description: 'description-' + i,
                language: i % 2 == 0 ? 'Hindi' : 'English',
                url: 'url-' + i,
                user: 'User-' + i,
                created: new Date().setMonth(i)
            });
        }

    });

    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js" ></script>
   <div ng-app="plunker" ng-controller="MainCtrl">
        <table>
            <tr>
                <td>
                    <label>Filter snippets by date</label><br>
                    <label>From: </label>
                    <input type="date" ng-model="from_date"><br>
                    <label>To: </label>
                    <input type="date" ng-model="to_date">
                </td>
            </tr>
            <tr ng-repeat="s in snippets | filter:description | snippetsByDate : from_date : to_date">
                <td>{{s.description}}</td>
                <td>{{s.language}}</td>
                <td>{{s.url}}</td>
                <td>{{s.user}}</td>
            </tr>
        </table>
    </div>

Collectives™ on Stack Overflow

Custom filter for comparing dates in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related