How to filter ng-repeat data by time range?

Question

I'm creating a app which will give flight list using third party API. I have a problem filtering between two time from different date and time format, I have gone thorough lot of tutorials but there are all using date only but I need to filer using time from different date and time format.

JSON

"Combination": [        
    "OutboundLeg" :{
            "DepartureDateTime": "07/14/2015 12:00"
    }
    "OutboundLeg" :{
            "DepartureDateTime": "07/15/2015 10:55"
    }
    "OutboundLeg" :{
            "DepartureDateTime": "07/18/2015 12:10"
    }
    "OutboundLeg" :{
            "DepartureDateTime": "07/14/2015 10:10"
    }
    "OutboundLeg" :{
            "DepartureDateTime": "07/18/2015 12:00"
    }
]

HTML

<div ng-repeat="data in Combination | filterBtwnTime: ??? ">
    <td>{{data.OutboundLeg.DepartureDateTime}}</td> 
</div>

How to achive this?

Answer 1

First the data that you have is not correct, since you have an object that has the same key, only the last value of OutboundLeg will be taken into account. You have an array with one object, that has the same key multiple times.

You need an array of objects, because angular filters work only on arrays .

The template:

<div ng-app="app"> 
<div ng-controller="MyController"> 
    <div ng-repeat="data in Combination | dateFilter:startDate:endDate ">
        <div ng-bind="data.DepartureDateTime "></div> 
    </div>
</div>

The filter:

function dateFilter() {
  return function(input, start, end) {
    var inputDate = new Date(input),
        startDate = new Date(start),
        endDate = new Date(end),
        result = [];

    for (var i=0, len = input.length; i < len; i++) {
        inputDate = new Date(input[i].DepartureDateTime);            
        if (startDate < inputDate && inputDate < endDate) {
           result.push(input[i]);
        }  
    }       
    return result;      

  }
}

The full code can be found in the fiddle I've created with a small update on the array, that filter the dates between a start and end date defined. You can adjust this as needed for you example.

Fiddle - filter between two dates

Update - filter on ng-repeat

Answer 2

You can use the date filter which allows you to format a date based upon a requested format style. The date formatter provides several built-in options.

If no date format is passed, then it defaults to showing mediumDate (as you can see below).

Here are the built-in localizable formats:

{{ data | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM -->
{{ data | date:'short' }} <!-- 8/9/13 12:09 PM -->
{{ data | date:'fullDate' }} <!-- Thursday, August 09, 2013 -->
{{ data | date:'longDate' }} <!-- August 09, 2013 -->
{{ data | date:'mediumDate' }} <!-- Aug 09, 2013 -->
{{ data | date:'shortDate' }} <!-- 8/9/13 -->
{{ data | date:'mediumTime' }} <!-- 12:09:02 PM -->
{{ data | date:'shortTime' }} <!-- 12:09 PM -->

So you can try this:

<div ng-repeat="data in Combination | date: 'medium' ">
    <td>{{data.OutboundLeg.DepartureDateTime}}</td> 
</div>

Answer 3

You can use a function as filter like this

HTML

<li ng-repeat="c in combinations | filter:ofYear(2015)">{{c.name}}</li>

CONTROLLER

$scope.ofYear = function(year) {
  return function(c) {
    return c.date.getFullYear() === year;
  }
}

http://plnkr.co/edit/vxIewUDGDjiz80W1Itag?p=preview