JSFiddle - React, Tailwind, and code Playground

by imran44

HTML

<input id="date-start" type="text" value="2020-01-01"></input>
<input id="date-stop" type="text" value="2020-01-02"></input>
<button type="button" onclick="searchDateAlternative()">Go</button>
<hr/>
<table id="myTable">
  <thead>
    <tr>
      <td>Date</td>
      <td>Name</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2020-01-01</td>
      <td>Foo</td>
    </tr>
    <tr>
      <td>2020-01-02</td>
      <td>Bar</td>
    </tr>
    <tr>
      <td>2020-01-03</td>
      <td>Baz</td>
    </tr>
  </tbody>
</table>

JavaScript

function searchDateAlternative() {
  // get the values and convert to date
  const input_startDate = new Date(document.getElementById("date-start").value);
  const input_stopDate = new Date(document.getElementById("date-stop").value);

  // only process table body rows, ignoring footer/headers
  const tr = document.querySelectorAll("#myTable tbody tr")

  for (let i = 0; i < tr.length; i++) {
    // ensure we have a relevant td
    let td = tr[i].getElementsByTagName("td");
    if (!td || !td[0]) continue;

    // you need to get the text and convert to date
    let td_date = new Date(td[0].textContent);

    // now you can compare dates correctly
    if (td_date) {
      if (td_date >= input_startDate && td_date <= input_stopDate) {
        // show the row by setting the display property
        tr[i].style.display = 'table-row;';
      } else {
        // hide the row by setting the display property
        tr[i].style.display = 'none';
      }
    }

  }
}