Show records current month AngularJS

0

How to filter records by the due date. I have a records search page that when accessed only displays the records due in the current month. My question is how to make a filter and apply in ng-repeat. I have the example below plus the data comes from the DB so the date is in the format yyyy-mm-dd. In the example below when the page is accessed display only the id: 1 and 2 that has expiration in the current month

/* EXEMPLO */

$scope.oportunidades = [

{id: 1, nome: Fulano, vencimento: 2018-08-01},
{id: 2, nome: Beltrano, vencimento: 2018-08-15},
{id: 3, nome: Jose, vencimento: 2018-10-03},

];

In this query page I already have input fields that search by date (working) and the other fields (order type, operator and city) are working as well. All fields are subject to dynamic query

/* BUSCA POR PERIODO */

angular.module("App").filter('betweenDate', function($filter) {
  return function(collection, column, startDate, endDate) {
    var new_collection = [];
    if (angular.isDefined(startDate) && angular.isDefined(endDate)) {
      if (startDate != '' && endDate != '') {
        if (angular.isDefined(startDate)) {
          startDate = Date.parse($filter('date')(startDate, 'yyyy-MM'));
        }
        if (angular.isDefined(endDate)) {
          endDate = Date.parse($filter('date')(endDate, 'yyyy-MM'));
        }
        if (!isNaN(startDate) && !isNaN(endDate)) {
          angular.forEach(collection, function(value, index) {
            var obj = value[column];
            var currentDate = Date.parse($filter('date')(obj, 'yyyy-MM'));
            if ((currentDate >= startDate && endDate >= currentDate)) {
              new_collection.push(value);
            }
          });
        } else {
          new_collection = collection;
        }
      } else {
        new_collection = collection;
      }
      collection = new_collection;
    }
    return collection;
  };

});
<div class="form-group col-md-2 input-group-sm mb-3">
  <label for="exampleInputPassword1" class="text-sm font-weight-bold">Data Inicio</label>
  <input type="text" name="startDate" class="form-control calendario" ng-model="startDate" data-date-format="yyyy-mm" ng-value="primeiroDia">
</div>
<div class="form-group col-md-2 input-group-sm mb-3">
  <label for="exampleInputPassword1" class="text-sm font-weight-bold">Data Fim</label>
  <input type="text" name="endDate" class="form-control calendario" ng-model="endDate" data-date-format="yyyy-mm" ng-value="ultimoDia">
</div>

<div class="col-sm-4">
  <div class="card text-center">
    <div class="card-header alert alert-info">
      <h5 class="card-title">Prospects</h5>
      <p class="card-text text-sm font-weight-bold text-dark" id="prospect"></p>
    </div>
    <div class="card-body" style="padding: 0px 5px 0px 5px; overflow: auto">
      <div class="text-left connectedSortable" style="list-style: none;" id="ulItensContato">
        <ul class="mb-0">
          <li style="font-size: 13px; padding:10px;" ng-repeat="prospect in listaProspect | orderBy: 'prospectNome' | betweenDate:'prospeccaoPrevisao':startDate:endDate | filter:item | filter:vm.selectCidade track by $index">
            <div class="timeline-panel">
              <div class="timeline-heading text-center">
                <a href="" class="text-danger font-weight-bold">{{prospect.prospectNome}}</a><br><br>
                <button type="button" class="btn btn-outline-secondary border-0 btn-sm font-weight-bold">
                                        {{prospect.prospectOperadora}}
                                    </button> |
                <button type="button" class="btn btn-outline-secondary border-0 btn-sm font-weight-bold">
                                        <i class="fa fa-phone"></i> {{prospect.prospeccaoLinhas}}
                                    </button> |
                <button type="button" class="btn btn-outline-secondary border-0 btn-sm font-weight-bold" data-toggle="tooltip" data-placement="bottom" title="Vencimento Contrato">
                                        <i class="fa fa-calendar"></i> {{prospect.prospeccaoVcto | date:'dd/MM/yyyy'}}
                                    </button>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- timeline -->
    </div>
  </div>
</div>
    
asked by anonymous 01.08.2018 / 18:59

0 answers