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-27-10</td>
      </tr>
      <tr>
         <td>US</td>
         <td>NorthAmerica</td>
         <td>2021-26-10</td>
      </tr>
  </tbody>
</table>

<script src="https://momentjs.com/downloads/moment.js"></script>

JavaScript

// this function used to update the dateformat into yyyy-mm-dd to yyyy-dd-mm
function changeDateFormat(date){
	var inputDate, dd, mm, yyyy, convertedDateString, convertedDate;
  
  inputDate = date.toString();
  
  // get date, month, fullyear from date
  dd = inputDate.slice(5,7);
  mm = inputDate.slice(-2);
  yyyy = inputDate.slice(0,4);
  
  convertedDateString = yyyy + '-' + mm + '-' + dd;
  convertedDate = new Date(convertedDateString);
  
  return convertedDate;
}


// this function used to do the search function
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 (var i = 0; i < tr.length; i++) {
    // ensure we have a relevant td
    var td = tr[i].getElementsByTagName("td");
    if (!td || !td[2]) continue;

    // you need to get the text and convert to date
    var tdDateString = td[2].textContent;
    var tdDate = changeDateFormat(tdDateString);

    // now you can compare dates correctly
    if (tdDate) {
      if (tdDate >= input_startDate && tdDate <= 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';
      }
    }
  }
}