Angular date filter in range

Angular date filter in range

Today, We want to share with you Angular date filter in range.
In this post we will show you Angular date filter in range, hear for Angular date filter in range we will give you demo and example for implement.
In this post, we will learn about Angular date filter in range with an example.

I want to some records display data in range of input date by two inputs of date. (AngularJS simple date filter in range by two inputs HTML elements.)

Filter a used on a specific date range.The date filter formats a date to a specified format display.

Syntax Date Filter

 {{ date | date : format : timezone }}

The date can be a simple date object Like as a milliseconds format, or a datetime string like “2019-02-08T06:05:05.035Z”

READ :  VueJS Dynamic change Component template Dynamic Components

Example of ng-repeat filtering data by date range

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://www.infinityknow.com/libs/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-app="ndApp" ng-controller="dateCtrl">
      <input type="text" class="form-control" LanName="from" ng-model="from">
  <input type="text" class="form-control" LanName="to" ng-model="to"> 
        <table border="1">
            <thead>
            <tr>
                <td>Unique ID</td>
                <td>LanName</td>
                <td>isactive</td>
                <td>Date</td>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="data in  lanlist | dateRange : from : to">
                <td> {{data.languagesId}}</td>
                <td> {{data.LanName}}</td>
                <td> {{data.isactive}}</td>
                <td> {{data.Date}}</td>
            </tr>
            </tbody>
        </table>
  </body>
</html>

script.js

var ng4app = angular.module('ndApp',[]).controller('dateCtrl', function($scope){
  
  $scope.from = '05/02/2019';
  $scope.to = '05/04/2019';
  
            $scope.lanlist = [
                 {languagesId : 'pp-12', LanName : 'laravel', isactive : 'Approved', Date:'05/01/2019' },
                 {languagesId : 'pp-11', LanName : 'laravel', isactive : 'Canceled', Date:'05/02/2019' },
                 {languagesId : 'pp-45', LanName : 'Javascript', isactive : 'Pending', Date:'05/03/2019' },
                 {languagesId : 'pp-32', LanName : 'Thomas', isactive : 'Canceled', Date:'05/04/2019' },
                 {languagesId : 'pp-01', LanName : 'Thomas', isactive : 'Pending', Date:'05/05/2019' },
                 {languagesId : 'pp-09', LanName : 'Javascript', isactive : 'Approved', Date:'05/06/2019' },
                 {languagesId : 'pp-23', LanName : 'vuejs', isactive : 'Requested', Date:'05/07/2019'},
                 {languagesId : 'pp-39', LanName : 'laravel', isactive : 'Pending', Date:'05/08/2019' }
            ];
         })
         
         .filter('dateRange', function() {
        return function(lanlists, from, to) {
            return lanlists.filter(function(lanlist) {
                return lanlist.Date >= from && lanlist.Date <= to;
            });
        }
    })

View Demo

Add a Comment

Your email address will not be published. Required fields are marked *