Entrar Ainda não tem acesso?
1
resposta

FIltro com Data usando range para usuário selecionar apenas os dados com a data pretendida

Referente ao curso Angular 2: webapps ainda mais poderosas parte 1

por Claudio Roberto Alvarenga Junior
| 37.2k xp | 4 posts
Desenvolvedor Front-End

Este código me retorna os dados devidamente populados, no campo data quero fazer um filtro com data range para que o usuário veja apenas os resultados que estão dentro das datas solicitadas.

campo de data: serverDate

<h2>Lista de Carrinhos Abandonados</h2>
<table class="table table-striped">
    <tr>
        <th></th> 
        <th>Data</th>
        <th>Valor</th>
        <th>Itens</th>
        <th>Cód. Usuário</th>
        <th>Responsável</th>
        <th>Telefone</th>
        <th>
            <a class="btn btn-success">
                Atualizar
            </a>
        </th>
    </tr>
    <tr *ngFor="let dado of dados3; let i = index;">
        <td> 
            <button type="button" class="btn btn-default" 
                data-toggle="modal" data-target="#modalVerCarrinho"
                (click)="verCarrinho(dado, i)">
                c
            </button>
        </td>
        <td>{{ dado.serverDate | date: 'dd/MM/yyyy'  }} {{ dado.serverTimePrettyFirstAction }}</td>
        <td>{{ dado.totalAbandonedCartsRevenue | currency:'BRL':true }}</td>
        <td>{{ dado.totalAbandonedCartsItems }}</td>
        <td>{{ dado.userId }}</td>
        <td>{{ dado.detail.dsResponsibleName | lowercase }}</td>
        <td>({{ dado.detail.nuPhoneDDD }}) {{ dado.detail.nuPhone | tel  }}</td>
        <td>            
            <button type="button" class="btn btn-danger" (click)="mudarFormato()">
                Ações
            </button>
        </td>
    </tr>
</table>
1 resposta
por Priscila Rodrigues dos Anjos - PAAS
| 215.7k xp | 52 posts

Hola Claudio,

Eu aconselharia o uso de uma função para filtrar esses dados:

obterDados(dateInicio, dateFim) {
    if(this.dados3.length === 0 || this.dados3 === undefined) {
      return this.dados3;
    }
    return this.dados3.filter((v) => {
      if (v.serverDate >= new Date(dateInicio) && v.serverDate <= new Date(dateFim)){
        return true;
      } else {
        return false;
      }
    })
  }

E no HTML, ao invés de chamar diretamente o dados3, chama-se a função, passando a data de inicio e fim do range:

<tr *ngFor="let dado of obterDados('01/09/2018', '01/30/2018'); let i = index;">

Neste caso eu passei as datas de maneira mockada para testes, mas poderia facilmente ser trocada por models de algum input. E o padrão de datas usadas no new Date() é o americano, então:

  • 01/09/2018 = 09 de janeiro de 2018
  • 01/30/2080 = 30 de janeiro de 2018

Caso necessário, esse formato pode ser mudado.

Com essas datas, todos os objetos que estiverem dentro do array dados3, com a serverDate entre os dias 09 e 30 de janeiro de 2018 retornaram.