[英]Date range for table Javascript
我目前在桌子上有这个过滤器
(function(document) {
'use strict';
var LightTableFilter = (function(Arr) {
var _input;
function _onInputEvent(e) {
_input = e.target;
var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
Arr.forEach.call(tables, function(table) {
Arr.forEach.call(table.tBodies, function(tbody) {
Arr.forEach.call(tbody.rows, _filter);
});
});
}
function _filter(row) {
var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}
return {
init: function() {
var inputs = document.getElementsByClassName('light-table-filter');
Arr.forEach.call(inputs, function(input) {
input.oninput = _onInputEvent;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
LightTableFilter.init();
}
});
})(document);
我想知道如何使用两个日期字段作为日期范围? 我刚刚尝试在其中添加两个日期字段,但这只是给我两个确切日期的响应,而不是介于两者之间的范围
这是我的日期的html代码
<label for="Date">Date From:</label>
<input type="date" id="datefrom" class="light-table-filter form-control" style="width:50%" data-table="order-table" placeholder="Filter">
<label for="Date">Date to:</label>
<input type="date" id="dateto" class="light-table-filter form-control" style="width:50%" data-table="order-table" placeholder="Filter">
我认为这需要对您的过滤器功能进行一些扩展,但是您可以使用比较运算符(例如>=
和<=
比较日期。
因此,您需要创建2个输入字段的日期和表行值的日期。 如果确实是日期单元格,则需要标识该单元格,否则它将创建具有任意单元格值的日期对象。 我不知道您的完整HTML,但是可以通过添加一个类来完成(例如,参见我的代码)。
例如:
function _filter(row) {
var dateFrom = new Date(document.getElementById('datefrom').value);
var dateTo = new Date(document.getElementById('dateto').value);
dateFrom.setHours(0);
dateTo.setHours(0);
var text = row.textContent.toLowerCase(),
val = _input.value.toLowerCase();
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
if (!isNaN(dateFrom.getTime()) && !isNaN(dateTo.getTime())) {
var cell = row.querySelectorAll(".date")[0];
var arr = cell.innerText.split('-');
var rowDate = new Date(arr[0],parseInt(arr[1])-1,arr[2]);
if (!isNaN(rowDate.getTime())) {
if (rowDate >= dateFrom && rowDate <= dateTo) {
row.style.display = 'table-row';
} else {
row.style.display = 'none';
}
}
}
}
确保Date
构造函数接收有效的可解析日期格式。 有关更多信息,请参见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date 。
编辑更新的答案和更正的时间。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.