JQuery Filter Table for Start and End Date input fields

Question

I have a table. This table contains rows and one of those columns in each row is a date. There are two input text boxes above the table; one input box represents the from date and the other represents the to date. Let's say the user only enters in the from date, I would like the table to display every row that contains that date and after. The opposite goes for if the user only enters the date in the TO input field; it would show all rows with dates leading up to that date. Along with if the user has a FROM AND TO date. It would catch the dates with the FROM date and the TO date along with every row that contains a date that is in between those.

What I have completed so far is an input field that will search the entire body of the table and output that row for whichever characters the user has entered.

JQuery

<script>
    $("#searchInput").keyup(function () {
    //split the current value of searchInput
    var data = this.value.split(" ");
    //create a jquery object of the rows
    var jo = $(".fbody").find("tr");
    if (this.value == "") {
        jo.show();
        return;
    }
    //hide all the rows
    jo.hide();

    //Recusively filter the jquery object to get results.
    jo.filter(function (i, v) {
        var $t = $(this);
        for (var d = 0; d < data.length; ++d) {
            if ($t.is(":contains('" + data[d] + "')")) {
                return true;
            }
        }
        return false;
    })
    //show the rows that 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.

Dave · Accepted Answer · 2016-04-21T21:04:17.930

One big problem with your current code was the duplicate ids the DOM. The remainder of your logic was close, but I simplified it.

The snippet below should work for you. If the dates entered at the top are invalid they will be ignored completely. Note that since we're running on the input event, you're temporarily going to filter out all your rows because it is going to interpret years before they are filled-out to 4 digits. You may want to account for this differently, or potentially use the blur event instead.

$(".searchInput").on("input", function() {
  var from = stringToDate($("#searchFrom").val());
  var to = stringToDate($("#searchTo").val());

  $(".fbody tr").each(function() {
    var row = $(this);
    var date = stringToDate(row.find("td").eq(2).text());
    
    //show all rows by default
    var show = true;

    //if from date is valid and row date is less than from date, hide the row
    if (from && date < from)
      show = false;
    
    //if to date is valid and row date is greater than to date, hide the 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>

Awesome! Thanks for the help! If I use the blur event, it works if the user then clicks outside of the input field. Do you know of any other options that might populate the table as the date is being typed inside of the input field? — userlkjsflkdsvm, Apr 21 '16 at 21:53
`input` is probably your best option unless you need to support IE < 9. If that doesn't work for you see the related question: http://stackoverflow.com/questions/6056819/input-text-change-events. — Dave, Apr 21 '16 at 22:16

JQuery Filter Table for Start and End Date input fields

1 Answers1