Filter between two Ionic dates

Question

I have a system where when entering a page a list is loaded with some data. But I would like to make a filter to search the data between two dates.

Ex: search all records between 03/10/2015 and 03/11/2015. How do I make this filter directly on Json? That is, without having to send these dates as a parameter for the server.

Here is the JSON that is returned by the server:

[
   {
      "codigoPrestador":9520,
      "nomePrestador":"Diego",
      "dataPagamento":"2015-04-30T00:00:00-0300",
      "totalDebito":6327.59,
      "totalLiquido":96560.2,
      "totalLote":102886,
      "totalGlosa":52.71
   },
   {
      "codigoPrestador":9520,
      "nomePrestador":"Diego",
      "dataPagamento":"2015-07-15T00:00:00-0300",
      "totalDebito":5600.41,
      "totalLiquido":85463.2,
      "totalLote":91063.6,
      "totalGlosa":172.09
   },
   {
      "codigoPrestador":9520,
      "nomePrestador":"Diego",
      "dataPagamento":"2015-07-31T00:00:00-0300",
      "totalDebito":5503.35,
      "totalLiquido":83982.1,
      "totalLote":89485.5,
      "totalGlosa":0.48
   }
]

Page:

Page Code:

<div class="row">
    <div class="col col-50">
    <label class="item item-input">
      <input type="date" placeholder="Data Inicial"  name="from" ng-model="startDate">
    </label>
    </div>
    <div class="col col-50">
    <label class="item item-input">
      <input type="date" placeholder="Data Final" name="to" ng-model="endDate">
    </label>
      </div>
</div>

  </br>
    <div class="row header">
      <div class="col col-30">Débito</div>
      <div class="col col-30">Glosa</div>
      <div class="col col-40" style="text-align:left">Liquido</div>
      <div class="col col-40" style="text-align:rigth">Data</div>

    </div>
    <div class="row" ng-repeat="item in items | betweenDate:'unformated':startDate:endDate">
      <div class="col col-30" style="font-size:13px">{{item.totalDebito | currency}}</div>
      <div class="col col-30"style="font-size:13px">{{item.totalGlosa | currency}}</div>
      <div class="col col-40" style="color: #339933;font-weight:bold;font-size:13px">{{item.totalLiquido | currency}}</div>
      <div class="col col-40" style="font-size:13px">{{item.dataPagamento | date:"dd/MM/yyyy"}}</div>
    </div>

Answer 1

$scope.prestadores = [
   {
      "codigoPrestador":9520,
      "nomePrestador":"Diego",
      "dataPagamento":"2015-04-30T00:00:00-0300",
      "totalDebito":6327.59,
      "totalLiquido":96560.2,
      "totalLote":102886,
      "totalGlosa":52.71
   },
   {
      "codigoPrestador":9520,
      "nomePrestador":"Diego",
      "dataPagamento":"2015-07-15T00:00:00-0300",
      "totalDebito":5600.41,
      "totalLiquido":85463.2,
      "totalLote":91063.6,
      "totalGlosa":172.09
   },
   {
      "codigoPrestador":9520,
      "nomePrestador":"Diego",
      "dataPagamento":"2015-07-31T00:00:00-0300",
      "totalDebito":5503.35,
      "totalLiquido":83982.1,
      "totalLote":89485.5,
      "totalGlosa":0.48
   }
];

$scope.convertDates = function(startDate, endDate) {
   arrDate['startDate'] = new Date(startDate).getTime();
   arrDate['endDate'] = new Date(endDate).getTime();
  return arrDate;
}



 $scope.filterByDate = function (startDate, endDate) {
            if (angular.isDefined(startDate) && angular.isDefined(endDate)) {
              var dates = $scope.convertDates(startDate,endDate);
                startDate = dates['startDate'];
                endDate = dates['endDate'];

                if (endDate < startDate)
                {
                    alert("A Data Inicial deve ser maior que a Data Final");
                    return;
                }

                var collection = _.groupBy($scope.prestadores, function (prestador) {
                    return (prestador.dataPagamento >= startDate && prestador.dataPagamento <= endDate);
                });
                $scope.prestadores = collection;
            }
  }

If you prefer, you can also make a filter:

.filter('dateFilter', function() {
   return function(input, startDate, endDate) {

      var collection = [];

      angular.forEach(input, function(oldValue){
        var dataPagamentoString = oldValue.dataPagamento;
        var dateTimestamp = new Date(dataPagamentoString).getTime();
        if(dateTimestamp >= startDate && dateTimestamp <= endDate) {
            collection.push(oldValue);         
        }
      });

      return collection;
   };
}); 

Look at the Manual of Angular JS, has more details about filters.

And here has one more example.

And here there’s another.

Besides these examples, I have another filter here:

angularApp.filter('betweenDate', function ($filter) {

    return function (collection, column, startDate, endDate) {

        if (angular.isDefined(startDate)) {
            var startDate = Date.parse(startDate);
        }

        if (angular.isDefined(endDate)) {
            var endDate = Date.parse(endDate);
        }

        if (angular.isDefined(startDate) && angular.isDefined(endDate)) {

            var retorno = [];

            if (angular.isDefined(collection)) {

                if (collection.length > 0) {
                    if (isNaN(startDate) || isNaN(endDate)) {
                        retorno = collection;
                    } else {

                        angular.forEach(collection, function (object, index) {
                            var obj = eval('object.' + column);
                            if (angular.isDefined(obj)) {
                                if (startDate > 0 && endDate > 0 && startDate <= endDate) {
                                    var currentDate = Date.parse($filter('date')(obj, 'yyyy-MM-dd HH:mm:ss'));
                                    if ((currentDate >= startDate) && (endDate >= currentDate)) {
                                        retorno.push(object);
                                    }

                                }
                            }
                        });
                    }
                }
            }

        } else {
            retorno = collection;
        }

        return retorno;
    };
});

Here it is the filter with the implementation you need.