How to Filter data using date in angular js?

Question

I have list of student names & i want to filter names using two dates.

I have two date pickers one is for from date another one is for to date .if user select 2015-10-19 as from date and 2015-10-20 as to date , then name list should show between this two dates.

example user selected above dates

list should be

Ramesh
Vignesh
Sarath
Gomal

I have added my code below some one can help me out .

<!--begin snippet: js hide: false -->

<!--language: lang-js -->

angular.module("date", [])
    .directive("datepicker", function () {
    return {
        restrict: "A",
        link: function (scope, el, attr) {
            el.datepicker({
                            dateFormat: 'yy-mm-dd'
                        });
        }
    };
})
.directive("datepicker1", function () {
    return {
        restrict: "A",
        link: function (scope, el, attr) {
            el.datepicker({
                            dateFormat: 'yy-mm-dd'
                        });
        }
    };
})
    .controller("dateCtrl", function ($scope) {

    $scope.names= [{

        id: "1",
        C_Name: "Ramesh",
        C_Phone: "*******",
        C_Option: {
        "date": {
            "$date": "2015-10-19T09:52:26.507Z"
        }
        }

    }, {
         id: "2",
        C_Name: "Suresh",
        C_Phone: "*****",
        C_Option: {
        "date": {
            "$date": "2015-10-21T09:52:26.507Z"
        }
        }

    }, {
         id: "3",
        C_Name: "Vignesh",
        C_Phone: "*******",
        C_Option: {
        "date": {
            "$date": "2015-10-20T09:52:26.507Z"
        }
         }

    },
    {
         id: "4",
         C_Name: "Sarath",
        C_Phone: "******",
        C_Option: {
        "date": {
            "$date": "2015-10-20T09:52:26.507Z"
        }
        }

    },

    {
         id: "5",
         C_Name: "Sundhar",
        C_Phone: "******",
        C_Option: {
        "date": {
            "$date": "2015-10-21T09:52:26.507Z"
        }
        }

    },

    {
         id: "6",
         C_Name: "Rajesh",
        C_Phone: "******",
        C_Option: {
        "date": {
            "$date": "2015-10-18T09:52:26.507Z"
        }
        }

    },
    {
         id: "7",
         C_Name: "Gomal",
        C_Phone: "******",
        C_Option: {
        "date": {
            "$date": "2015-10-20T09:52:26.507Z"
        }
        }

    }


    ]




});

 <!-- language: lang-html -->

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div ng-app="date">
<div ng-controller="dateCtrl">
  <!-- jq -->

   <!-- ng -->
    From Date:<input type="text" datepicker ng-model="date2" />
  <span>{{date2}}</span>
   To Date:<input type="text" datepicker1 ng-model="date3" />
  <span>{{date3}}</span>
  <br><br><br>
  <label>List Of Names</label>

         <br>


        <div ng-repeat="name in names | filter:search" >
            <br>{{name.C_Name}}
            <br>



         </div>
</div>
</div>

<!-- end snippet -->

demo @ JSFiddle

create watch on two model then filter the source by date range — Anik Islam Abhi, Dec 21 '15 at 08:33
you can create a custom filter for it there you can filter the data provided. — Jai, Dec 21 '15 at 08:53
i want only 2015-10-19 detail. how can i get only 2015-10-19 detail — , Dec 21 '15 at 11:07

score 1 · Accepted Answer · edited May 23 '17 at 11:47

1

Working Fiddle:

Change in HTML:

<div ng-repeat="name in names | myfilter:date2:date3" >

Change in JavaScript: Add following custom filter

moduleName.filter("myfilter", function() {
  return function(items, from, to) {

    var arrayToReturn = [];        
    for (var i=0; i<items.length; i++){   

        var test = new Date(items[i].C_Option.date.$date);
        var month = test.getMonth()+1;
        var date = test.getDate();
        var year = test.getFullYear();
        var newDate = year+"-"+month+"-"+date            
        if (newDate>= from && newDate <=  to)             {
            arrayToReturn.push(items[i]);
        }
    }

        return arrayToReturn;
  };
})

Source: https://stackoverflow.com/a/25521779/3186722

edited May 23 '17 at 11:47

Community

1
1

answered Dec 21 '15 at 09:30

Khalid Hussain

1,675
17
25

if i select same date in both date picker it should show the detail – Dec 21 '15 at 11:04
What do you mean by detail? all elements of the array? – Khalid Hussain Dec 21 '15 at 11:06
i want only 2015-10-19 detail. how can i get only 2015-10-19 detail – Dec 21 '15 at 11:12
its not working .http://jsfiddle.net/swhhuxx8/6/ .check this fiddle here it should show Ramesh and Rajesh but here its showing only Ramesh – Dec 21 '15 at 11:41
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/98560/discussion-between-martin-and-khalid-hussain). – Dec 21 '15 at 11:51

Suresh B · Answer 2 · 2016-01-04T10:25:42.773

var nameSpace = angular.module('tst',[]);

nameSpace.controller('MyController', function MyController($scope) {
  $scope.date1 = "27-05-2010"
  $scope.date2 = "29-07-2015";
  $scope.orders = [
  {
    "date1": 1306487800,
    "date2": 1406587800
  },
  {
    "date1": 1196487800,
    "date2": 1406597800
  }]
});

// parse a date in dd-mm-yyyy format
function parseDate(input) {
  var parts = input.split('-');
  // Note: months are 0-based
  return new Date(parts[2], parts[1]-1, parts[0]); 
}

nameSpace.filter("myfilter", function() {
  return function(items, from, to) {
        var df = parseDate(from);
        var dt = parseDate(to);
        var arrayToReturn = [];        
        for (var i=0; i<items.length; i++){
            var tf = new Date(items[i].date1 * 1000),
                tt = new Date(items[i].date2 * 1000);
            if (tf > df && tt < dt)  {
                arrayToReturn.push(items[i]);
            }
        }
        
        return arrayToReturn;
  };
});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div ng-app="tst"> 
<div ng-controller="MyController"> 
    <table>
                <tr>
                    <td>From:<input  ng-model="date1"  type="text" placeholder="" /></td>
                        <td>To:<input  ng-model="date2"  type="text" placeholder="" /></td>
                </tr>

                <tr ng-repeat="order in orders | myfilter:date1:date2">
                    <td>{{order.date1 * 1000 | date:'dd-MM-yyyy'}}</td>
                    <td>{{order.date2 * 1000 | date:'dd-MM-yyyy'}}</td>
                </tr>
    </table>
</div>
</div>

if i want 2015-12-20 name list what should i do ? – Dec 21 '15 at 10:59 — , Dec 21 '15 at 10:59

dreamweiver · Answer 3 · 2015-12-21T13:13:28.190

0

You need to create a custom filter function for this functionality and compare the date on the records against the start and end date entered by user.

Im using moment.js for date comparisions as it the best library for date comparisions.

HTML CODE:

 <div ng-repeat="name in names | filter: dateRangeFilter('C_Option', date2, date3)">
     <br>{{name.C_Name}}
     <br>
  </div>
  <span>{{resultsCount}} records returned</span>

JQUERY CODE:

    $scope.dateRangeFilter = function(property, startDate, endDate) {
     return function(item) {
         $scope.resultsCount = 0;
        if (item[property] === null){
          return false;
        }
        var localEndDate ='';
        if(typeof endDate === 'undefined' ){
            localEndDate =  moment(new Date(),"DD-MM-YYYY") +'T23:59:59.000Z';
        }else{
         localEndDate = endDate + 'T23:59:59.000Z';
        }

        var currentDate = moment(item[property].date.$date, "DD-MM-YYYY");
        var s = moment(startDate, "DD-MM-YYYY");
        var e = moment(localEndDate, "DD-MM-YYYY");
        if (currentDate >= s && currentDate <= e) {
            $scope.resultsCount++;
           return true;
        }
        return false;
     }
  }

Live Demo @ JSFiddle

Update : code updated to show the count of records after filter.

edited Dec 21 '15 at 13:13

answered Dec 21 '15 at 09:34

dreamweiver

6,002
2
24
39

if i want only one date names like 2015-12-20 what should i do – Dec 21 '15 at 10:55
you mean when only `start date` is entered and `end date` is kept blank ? – dreamweiver Dec 21 '15 at 10:57
yeah otherwise both input field if i select same date – Dec 21 '15 at 11:00
its not working properly.i have selected 2015-12-18 as from date and 2015-12-19 as to date .its showing only Ramesh.but here it should show Rajesh and Ramesh – Dec 21 '15 at 11:35
1

problem is that when you selected the `start date` or `end date` by default the time is set to start of the day were as your names list record has time set to `9pm` thats why its not filtering properly. anyway i have fixed it you can check the updated jsfiddle link `http://jsfiddle.net/dreamweiver/8aQCm/43/` – dreamweiver Dec 21 '15 at 11:53
i have selected 2015-12-18 and 2015-12-19 its showing only Ramesh .here it should show Ramesh and Rajesh – Dec 21 '15 at 12:08
i dont know which link your checking , try this http://jsfiddle.net/dreamweiver/8aQCm/43/. its working fine for me. also when you dont give end date, filter considers today as end date – dreamweiver Dec 21 '15 at 12:25
if i want particular date.what should i do? – Dec 21 '15 at 12:29
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/98562/discussion-between-dreamweiver-and-martin). – dreamweiver Dec 21 '15 at 12:30

How to Filter data using date in angular js?

3 Answers3