How to make a date filter load the data (at runtime) according to what the user is typing?

Asked

Viewed 150 times

1

I have the screen below and as soon as the user is typing the date, the Function already loading the data.

I don’t know which jQuery event to use and/or if it’s something more detailed.

inserir a descrição da imagem aqui

jquery

  • @dvd filter the already loaded tab, pq this table will bring all orders to customer, in case he wanted to search a specific date or cycle.

  • @dvd in case I thought date a split/substring on the date and take only what is ("mm/yyyy")

  • @dvd Cycle would be at full perioad that the data belongs. Example "Request XPTO belongs to the cycle "02/2018" is a wider filtering.

  • So you want to filter only by the cycle?

  • @dvd No, by date too. But what I need at the moment is to know how to do this only for dates even, then I see the question of the cycle

1 answer

1


You can go calling the function that will filter using the event input (as you type in the fields):

$(elementos).on("input"...

In the example below, when the fields "start date" and "end date" both have 10 characters (which corresponds to the format dd/MM/yyyy) will trigger the .each that will search in each column td:eq(1) the first 10 characters (.substring(0,10)) of the text of the second td (:eq(1)) which refers to the date and compare whether it is contained in crease of the dates of inputs. If it is, it will keep its line visible ($(this).closest("tr").show()), otherwise hide it (($(this).closest("tr").hide())).

Whereas the format of dates inputs be it...

dd/MM/aaaa

...to compare dates, I changed the order to...

aaaa/MM/dd

For that I used .split("/") using the indexes of the array to create a new date in the format above, so it is possible to compare dates.

Code example:

$(document).ready(function(){
   
   $("#diaini, #diafim").on("input", function(){
      
      var dIni = $("#diaini").val();
      var dFim = $("#diafim").val();
      
      if(dIni.length == 10 && dFim.length == 10){
         
         var dIni_d = dIni.split("/");
         var dFim_d = dFim.split("/");
         
         dIni_d = dIni_d[2]+"/"+dIni_d[1]+"/"+dIni_d[0];
         dFim_d = dFim_d[2]+"/"+dFim_d[1]+"/"+dFim_d[0];
         
         $("#tabela tr").find("td:eq(1)").each(function(){
            
            var tab_dia = $(this).text().trim().substring(0,10);
            var tab_dia_d = tab_dia.split("/");
            tab_dia_d = tab_dia_d[2]+"/"+tab_dia_d[1]+"/"+tab_dia_d[0];
            
            tab_dia_d >= dIni_d && tab_dia_d <= dFim_d ?
            $(this).closest("tr").show()
            :
            $(this).closest("tr").hide();
            
         });
         
      }
      
   });
   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Data inicial:
<input maxlength="10" type="text" id="diaini">
Data final:
<input maxlength="10" type="text" id="diafim">
<br>

<table id="tabela" border="1">
   <tr>
      <td>
         1
      </td>
      <td>
         22/03/2018
      </td>
   </tr>
   <tr>
      <td>
         2
      </td>
      <td>
         21/03/2018
      </td>
   </tr>
   <tr>
      <td>
         3
      </td>
      <td>
         02/03/2018
      </td>
   </tr>
</table>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.