Angular 8

Angular filter between two dates

How to Angular 6+ filter records between two dates?

The Angular Filters are used to display or modify the live data as per your filter text. We can write the filter expression using the pipe (|) character i.e.
{{ yourData| filterTypes }}

There are different types of filter which are given below.
1.      Uppercase Filter                                   
2.      Lowercase Filter
3.      Currency Filter
4.      OrderBy Filter

5.      Filter

Example 1:

let users: any[] = [{ "id": 1, "name": "Anil Singh", "date": "2019-06-01" },
    { "id": 2, "name": "Sunil", "date": "2019-08-07" },
    { "id": 3, "name": "Aradhya", "date": "2019-11-22" }];

//we need to parse the strings to date object and use them in the comparison.
let start_Date = new Date("01-02-2019");
let end_Date = new Date("31-10-2019");

let selectedUsers = this.users.filter(f => new Date(f.date) > start_Date && new Date(f.date) < end_Date);

console.log(selectedUsers); //filter result

Example 2:

//You just needs to pass the models with the filter as parameters, like
app.filter('dateRange', function () {
    return function (users, startDate, endDate) {
        var result = [];

        var from_date = Date.parse(startDate);
        var to_date = Date.parse(endDate);
        //console.log(from_date, to_date);

        angular.forEach(users, function (user) {
            if (user.date > from_date && user.date < to_date) {
                result.push(user);
            }
        });
        return result;
    };
});

And the HTML code looks like –

<input ng-model="from_date" type="text" />
<input ng-model="to_date" type="text" />

<div ng-repeat="user in users | dateRange : from_date : to_date"></div>
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^