2

I have a json file who contains multiple events who have a start date. I want to make a filter to display events who have a start date only greater than a date given by a user.

The input where the user give the date:

<label for="rechercheDate">Date de début</label>
<input type="text" id="rechercheDateDebut" class="form-control" datepicker-popup="{{format}}" ng-model="dateDebut" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>

(I use the date picker from the UI bootstrap (https://angular-ui.github.io/bootstrap/))

The events and start date are display with:

<li ng-repeat="resultats in resultatsJSON.results">
    Start date: {{resultats.tra_start_date | date:'dd-MM-yyyy'}} 
    ....
    

To do what i want, i think i need to make a filter in my ng-repeat, something like:

<li ng-repeat="resultats in resultatsJSON.results |filter:resultats.tra_start_date>dateDebut">

This post AngularJS : ng-repeat filter when value is greater than seems similar but is not applied to date format.How can i do that ?

This is a JSFiddle to illustrate my problem: https://jsfiddle.net/Daviloppeur/egf0kjzc/

Syscall
  • 19,327
  • 10
  • 37
  • 52

1 Answers1

2

Take a look at filter docs:

{{ filter_expression | filter : expression : comparator}}

You should use an Object for the expression and a comparator for checking dates:

$scope.gteComparator = function(a,b) {
  return new Date(a) >= new Date(b);
};

Use it like so:

<li ng-repeat="item in results | filter:{ start_date: start }:gteComparator>
Ilan Frumer
  • 32,059
  • 8
  • 70
  • 84
  • it seems not works for me, added a console.log to see if gteComparator is call and nothing appear. I implemented gteComparator like this: myApp.filter('gteComparator', function(a,b) { console.log("appel de gteComparator"); return new Date(a) >= new Date(b); }); –  Nov 07 '14 at 12:21
  • @Ilan Frumer you save my life – raj Nov 07 '16 at 12:18