将表格中的日期从过滤到 [英] Filter dates in table from, to
本文介绍了将表格中的日期从过滤到的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的项目中有桌子
我在表格中按日期进行了过滤
I have filtering by date in my table
现在,它仅按日期中的值过滤,但我想按日期中的日期过滤.
Now it filters only by Date from value, but I want to filter it from-to dates.
我该怎么办?
这是演示我的问题的代码段
Here is snippet that demonstrates my problem
$('#datefilterfrom').change(function () {
var date = moment(this.value).format('DD/MM/YYYY');
var filter, table, tr, td, i;
filter = date.toUpperCase();
table = document.getElementById("testTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[2];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<div class="row">
<div class="col-md-3">
<h4>Date from</h4>
<input type="date" class="form-control" id="datefilterfrom" data-date-split-input="true">
</div>
<div class="col-md-3">
<h4>Date to</h4>
<input type="date" class="form-control" id="datefilterto" data-date-split-input="true">
</div>
</div>
<table id="testTable" class="table" border="1">
<tr>
<td>nothing</td>
<td>nothing</td>
<td>18/07/2018</td>
<td>nothing</td>
</tr>
<tr>
<td>nothing</td>
<td>nothing</td>
<td>19/07/2018</td>
<td>nothing</td>
</tr>
<tr>
<td>nothing</td>
<td>nothing</td>
<td>20/07/2018</td>
<td>nothing</td>
</tr>
</table>
感谢您的帮助.
推荐答案
请检查是否可以
function filterRows() {
var from = $('#datefilterfrom').val();
var to = $('#datefilterto').val();
if (!from && !to) { // no value for from and to
return;
}
from = from || '1970-01-01'; // default from to a old date if it is not set
to = to || '2999-12-31';
var dateFrom = moment(from);
var dateTo = moment(to);
$('#testTable tr').each(function(i, tr) {
var val = $(tr).find("td:nth-child(3)").text();
var dateVal = moment(val, "DD/MM/YYYY");
var visible = (dateVal.isBetween(dateFrom, dateTo, null, [])) ? "" : "none"; // [] for inclusive
$(tr).css('display', visible);
});
}
$('#datefilterfrom').on("change", filterRows);
$('#datefilterto').on("change", filterRows);
https://jsfiddle.net/oajc94hf/38/
这篇关于将表格中的日期从过滤到的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文