How to filter dates by AngularJS?

Question

How to filter dates by AngularJS?

Navigation

#1 by (0 votes)

2

I have this function that picks up how many payables there are and counts how many of them are within the range that I defined. But it is not bringing the information properly.

$scope.filterDate = function(option)
{
    var tam = $scope.billToPayData.length;

    if (tam > 0) {
        if ($scope.cp.inicio != null && $scope.cp.fim != null) {
            for (var i = 0; i < tam; i++) {
                $scope.cpFilter[i] = false;

                if ($scope.billToPayData[i].vencimento >= $filter('date')($scope.cp.inicio, 'yyyy-MM-dd') &&
                    $scope.billToPayData[i].vencimento <= $filter('date')($scope.cp.fim, 'yyyy-MM-dd')) {
                    $scope.cpFilter[i] = true;
                }
            }
        } else {
            swal('Selecione as duas datas', 'Digite o período das contas', 'warning');
        }
    }
};

javascript angularjs

asked by anonymous 14.05.2018 / 19:09

1 answer

Get Directory and number in a string in an irregular expression Firebase - Relationship between documents

score 0 · Answer 1

You can create a custom filter for your dates as follows:

(function() {
  angular
    .module('meuApp', []);

  angular
    .module('meuApp')
    .filter('entre', entre);

  function entre() {
    return function(itens, inicio, fim) {
      var filtrados = [];

      angular.forEach(itens, function(item) {
        if (item.vencimento >= inicio && item.vencimento <= fim) {
          filtrados.push(item);
        }
      });

      return filtrados;
    }
  }

  angular
    .module('meuApp')
    .controller('AppController', AppController);

  AppController.$inject = [];

  function AppController() {
    var vm = this;

    _inicializar();

    function _inicializar() {
      vm.itens = [];

      vm.de = new Date('2018-05-05T00:00:00');
      vm.ate = new Date('2018-05-07T00:00:00')

      vm.itens.push({vencimento: new Date('2018-05-01T00:00:00')});
      vm.itens.push({vencimento: new Date('2018-05-02T00:00:00')});
      vm.itens.push({vencimento: new Date('2018-05-03T00:00:00')});
      vm.itens.push({vencimento: new Date('2018-05-04T00:00:00')});
      vm.itens.push({vencimento: new Date('2018-05-05T00:00:00')});
      vm.itens.push({vencimento: new Date('2018-05-06T00:00:00')});
      vm.itens.push({vencimento: new Date('2018-05-07T00:00:00')});
      vm.itens.push({vencimento: new Date('2018-05-08T00:00:00')});
      vm.itens.push({vencimento: new Date('2018-05-09T00:00:00')});
      vm.itens.push({vencimento: new Date('2018-05-10T00:00:00')});
    }
  };
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="meuApp">
  <div ng-controller="AppController as vm">
    <div>
      TODAS
      <p ng-repeat="item in vm.itens">
        {{ item.vencimento | date : 'dd/MM/yyyy'}}
      </p>
    </div>
    <div>
      FILTRADAS
      <p ng-repeat="item in vm.itens | entre : vm.de : vm.ate">
        {{ item.vencimento | date : 'dd/MM/yyyy'}}
      </p>
    </div>
  </div>
</div>

Note that I created the filter entre that checks if the vencimento property is between the two dates passed as a parameter.