Filter the data between two dates in Javascript

by imran44

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div style="margin-left: 19px; font-size: 17px;">NetDue Date</div>
<div class="row" id="id_row">
   <div class='row' style="margin-left: 19px;"> From:</div>
   <input type="date" name="from_Date"  style="margin-left: 30px; font-size: 20px;" 
      placeholder="From_Date" id="From_Date" required="" > 
   <div class='row' style="margin-left: 19px;">  To:</div>
   <input type="date" name="to_Date" style="margin-left: 30px;font-size: 20px;" 
      placeholder="To_Date" id="To_Date" required="" > 
   <input type="submit" value="Apply" id="btn_submit" style=" width:90px; 
      height:45px; margin-left: 40px; margin-bottom: 30px;"
      class="btn btn-success btn" onclick="searchDate()">
   <input type="reset" value="Reset" id="btn_submit" style=" width:90px; 
      height:45px;margin-left: 65px; margin-bottom: 30px;"
      class="btn btn-success btn">
</div>
<table class="table table-striped border datatable" id='table_id'>
  <!-- <table class="dataclass" id='table_id'>  -->
  <thead id="tablehead">
      <tr>
         <th>Region</th>
         <th>Area</th>
         <th>Date</th>
      </tr>
  </thead>
  <tbody>
      <tr>
         <td>US</td>
         <td>NorthAmerica</td>
         <td>2021-10-27</td>
      </tr>
      <tr>
         <td>US</td>
         <td>NorthAmerica</td>
         <td>2021-10-26</td>
      </tr>
          <tr>
         <td>US</td>
         <td>NorthAmerica</td>
         <td>2021-10-25</td>
      </tr>
      
        <tr>
         <td>US</td>
         <td>NorthAmerica</td>
         <td>2021-10-24</td>
      </tr>
      
  </tbody>
</table>

JavaScript

function searchDate() {
	var input_startDate, input_stopDate, tr, i;
  // get the values and convert to date
  input_startDate =  new Date(document.getElementById("From_Date").value);
  input_stopDate =  new Date(document.getElementById("To_Date").value);

  tr = document.querySelectorAll("#table_id 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[2]) continue;

    // you need to get the text and convert to date
    let td_date = new Date(td[2].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';
      }
    }
  }
}