javascript - JQuery Filter Table for Start and End Date input fields -

i have table. table contains rows , 1 of columns in each row date. there 2 input text boxes above table; 1 input box represents date , other represents date. let's user enters in date, table display every row contains date , after. opposite goes if user enters date in input field; show rows dates leading date. along if user has , date. catch dates date , date along every row contains date in between those.

what have completed far input field search entire body of table , output row whichever characters user has entered.

jquery

<script>     $("#searchinput").keyup(function () {     //split current value of searchinput     var data = this.value.split(" ");     //create jquery object of rows     var jo = $(".fbody").find("tr");     if (this.value == "") {         jo.show();         return;     }     //hide rows     jo.hide();      //recusively filter jquery object results.     jo.filter(function (i, v) {         var $t = $(this);         (var d = 0; d < data.length; ++d) {             if ($t.is(":contains('" + data[d] + "')")) {                 return true;             }         }         return false;     })     //show rows match.     .show(); }).focus(function () {     this.value = "";      $(this).unbind('focus'); })      </script> 

html

          <input id="searchinput" type="text" placeholder="from"/>           <input id="searchinput" type="text" placeholder="to" >           <tbody class="fbody">                             <tr>                                <td>something</td>                                 <td>something</td>                                 <td>4/18/2016</td>                                 <td>something</td>                             </tr>                             <tr>                                <td>something</td>                                 <td>something</td>                                 <td>4/19/2016</td>                                 <td>something</td>                             </tr>                              <tr>                                <td>something</td>                                 <td>something</td>                                 <td>4/20/2016</td>                                 <td>something</td>                             </tr>                        </tbody> 

please help. thanks.

one big problem current code duplicate ids dom. remainder of logic close, simplified it.

the snippet below should work you. if dates entered @ top invalid ignored completely. note since we're running on input event, you're temporarily going filter out rows because going interpret years before filled-out 4 digits. may want account differently, or potentially use blur event instead.

$(".searchinput").on("input", function() {    var = stringtodate($("#searchfrom").val());    var = stringtodate($("#searchto").val());      $(".fbody tr").each(function() {      var row = $(this);      var date = stringtodate(row.find("td").eq(2).text());            //show rows default      var show = true;        //if date valid , row date less date, hide row      if (from && date < from)        show = false;            //if date valid , row date greater date, hide row      if (to && date > to)        show = false;        if (show)        row.show();      else        row.hide();    });  });    //parse entered date. return nan if invalid  function stringtodate(s) {    var ret = nan;    var parts = s.split("/");    date = new date(parts[2], parts[0], parts[1]);    if (!isnan(date.gettime())) {      ret = date;    }    return ret;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <input id="searchfrom" class="searchinput" type="text" placeholder="from"/>  <input id="searchto" class="searchinput" type="text" placeholder="to" >  <table class="fbody" border="1">    <tr>      <td>nothing</td>      <td>nothing</td>      <td>4/18/2016</td>      <td>nothing</td>    </tr>    <tr>      <td>nothing</td>      <td>nothing</td>      <td>4/19/2016</td>      <td>nothing</td>    </tr>    <tr>      <td>nothing</td>      <td>nothing</td>      <td>4/20/2016</td>      <td>nothing</td>    </tr>  </table>