Home > Software engineering >  Filter the data between two dates in Javascript
Filter the data between two dates in Javascript

Time：10-27

I tried to filter the table rows between the start date and end date on clicking the button but I don't know where I'm wrong I just got this snippet from here,but it didn't worked for me.

I'm new to JS I'm trying to implement this part in the code but it didn't I couldn't able to find what's going wrong and my html input calendar is in mm/dd/yyyy format and my table date which comes from an api in yyyy-mm-dd format. thanks in advance

function searchDate() {
  var input_startDate, input_stopDate, table, 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);

  table = document.getElementById("table_id");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i  ) {
    // you need to get the text and convert to date
    let td_date = new Date(tr[i].getElementsByTagName("td").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';
      }
    }

  }
}
<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  id='table_id'>  -->
  <thead>
    <thead id="tablehead">
      <tr>
        <th> Region</th>
        <th> Area </th>
        <th> Date </th>
      </tr>
      <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>
</div>
</div>
</div>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Please check the following HTML and JS Code, I hope this will full fill your expectations

JS CODE

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';
      }
    }
  }
}

HTML CODE


<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  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;"
       onclick="searchDate()">
   <input type="reset" value="Reset" id="btn_submit" style=" width:90px; 
      height:45px;margin-left: 65px; margin-bottom: 30px;"
      >
</div>
<table  id='table_id'>
  <!-- <table  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>
  </tbody>
</table>

WORKING FIDDLE https://jsfiddle.net/katheer_mizal/dpfa0Lw6/49/

----------------------------------------------------

I have done 5 code changes in you given code

1st mistake in ids' passed to getElementById function

input_startDate = new Date(document.getElementById("from_date").value);
input_stopDate = new Date(document.getElementById("To_date").value);

changed to

input_startDate =  new Date(document.getElementById("From_Date").value);
input_stopDate =  new Date(document.getElementById("To_Date").value);

2nd Update variable assigns

var input_startDate, input_stopDate, table, tr, i;

Changed to

var input_startDate, input_stopDate, tr, i;

3rd change table, and tr variable assign

table = document.getElementById("table_id");
tr = table.getElementsByTagName("tr");

changed to

tr = document.querySelectorAll("#table_id tbody tr");

4th for loop go changed

for (i = 0; i < tr.length; i  ) {
  // you need to get the text and convert to date
  let td_date = new Date(tr[i].getElementsByTagName("td").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';
    }
  }
}

changed to

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';
    }
  }
}

5th date format got changed in given table

  • your using date input type (input[type="date"])
  • date input type giving date output format is yyyy-mm-dd (2021-10-26), more details check this link Click Here
  • but your using data format is yyyy-dd-mm (2021-26-10)
  • so I changed all date values into yyyy-mm-dd (2021-10-26) format
<table class="table table-striped border datatable" id='table_id'>
   <!-- <table  id='table_id'>  -->
   <thead>
   <thead id="tablehead">
      <tr>
         <th> Region</th>
         <th> Area </th>
         <th> Date </th>
      </tr>
      <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>

Changed to

<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>
  </tbody>
</table>

CodePudding user response：

There is a mistake in ids' passed to getElementById function. Change the following
From

input_startDate = new Date(document.getElementById("from_date").value);
input_stopDate = new Date(document.getElementById("To_date").value);

to

input_startDate = new Date(document.getElementById("From_Date").value);
input_stopDate = new Date(document.getElementById("To_Date").value);

Page link：https//www.codepudding.com/Softwareengineering/168616.html

Prev:JS return structure
Next:Preserve quotes when converting array of string
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding