在Javascript中过滤两个日期之间的数据

我试图在单击按钮时过滤开始日期和结束日期之间的表行，但我不知道我错在哪里，我只是从这里得到了这个片段，但它不适合我。

我是JS的新手，我试图在代码中实现这部分，但它没有，我无法找到出了什么问题，我的html输入日历是mm/dd/yyyy格式，我的表日期来自yyyy-mm-dd格式的api。提前感谢

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/bootstrap@5.1.3/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>
<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>

请查看以下HTML和JS代码:我希望这将满足您的期望

<JS代码/strong>

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


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>
</tbody>
</table>

工作小提琴https://jsfiddle.net/katheer_mizal/dpfa0Lw6/49/

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

我已经做了5个代码更改你给定的代码

<1日/strong>id传递给getElementById函数错误

input_startDate = new Date(document.getElementById("from_date").value); input_stopDate = new Date(document.getElementById("To_date").value);
更改为
input_startDate = new Date(document.getElementById("From_Date").value); input_stopDate = new Date(document.getElementById("To_Date").value);
2更新变量赋值

var input_startDate, input_stopDate, table, tr, i;
更改为
var input_startDate, input_stopDate, tr, i;
3修改表和tr变量赋值

table = document.getElementById("table_id"); tr = table.getElementsByTagName("tr");
更改为
tr = document.querySelectorAll("#table_id tbody tr");
4日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'; } } }
更改为
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'; } } }
5日期格式被更改

您的使用日期输入类型(input[type="date"])
日期输入类型给出日期输出格式为yyyy-mm-dd(2021-10-26)，更多详细信息请查看此链接点击这里
但是你使用的数据格式是yyyy-dd-mm (2021-26-10)
所以我将所有日期值更改为yyyy-mm-dd(20121-10-26)格式
<table class="table table-striped border datatable" 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>
更改为
<table class="table table-striped border datatable" 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>

传递给getElementById函数的id有错误。从

更改以下
input_startDate = new Date(document.getElementById("from_date").value); input_stopDate = new Date(document.getElementById("To_date").value);
input_startDate = new Date(document.getElementById("From_Date").value); input_stopDate = new Date(document.getElementById("To_Date").value);

相关内容

最新更新

热门标签：