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
– Anik Islam Abhi, Commented Dec 21, 2015 at 8:33
you can create a custom filter for it there you can filter the data provided. — Jai
– Jai, Commented Dec 21, 2015 at 8:53
i want only 2015-10-19 detail. how can i get only 2015-10-19 detail — user5503464
– user5503464, Commented Dec 21, 2015 at 11:07

Community · Accepted Answer · 2017-05-23 11:47:18Z

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, 2017 at 11:47

CommunityBot

11 silver badge

answered Dec 21, 2015 at 9:30

Khalid Hussain

1,69417 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user5503464 Over a year ago

if i select same date in both date picker it should show the detail

Khalid Hussain Over a year ago

What do you mean by detail? all elements of the array?

user5503464 Over a year ago

i want only 2015-10-19 detail. how can i get only 2015-10-19 detail

user5503464 Over a year ago

its not working .jsfiddle.net/swhhuxx8/6 .check this fiddle here it should show Ramesh and Rajesh but here its showing only Ramesh

user5503464 Over a year ago

Let us continue this discussion in chat.

dreamweiver · Accepted Answer · 2015-12-21 13:13:28Z

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, 2015 at 13:13

answered Dec 21, 2015 at 9:34

dreamweiver

5,9922 gold badges27 silver badges39 bronze badges

9 Comments

user5503464 Over a year ago

if i want only one date names like 2015-12-20 what should i do

dreamweiver Over a year ago

you mean when only start date is entered and end date is kept blank ?

user5503464 Over a year ago

yeah otherwise both input field if i select same date

user5503464 Over a year ago

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

dreamweiver Over a year ago

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/

|

Suresh B · Accepted Answer · 2016-01-04 10:25:42Z

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>

Collectives™ on Stack Overflow

How to Filter data using date in angular js?

3 Answers 3

5 Comments

9 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related