javascript - 使用 date() 按日期范围过滤表格行
问题描述
我试图过滤范围，moment.js但我在导入该库时遇到了一些问题（与其他库冲突），所以现在我想改用date()构造函数，但它不能正常工作。
你知道为什么它不能正常工作吗？，这是我的尝试：
date()我用过getTime()
一些在您点击时不起作用的示例：
从 :01 01 2019到 :31 12 2019
$(function(){
//NAME
$("#name").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#my-table").find('tr').filter(function() {
$(this).toggle($(this).find('td').text().toLowerCase().indexOf(value) > -1)
});
});
//FROM
$("#from").bind("keyup change", function() {
var value = new Date($(this).val().toLowerCase()).getTime();
//console.log(value);
$("#my-table").find('tr').filter(function() {
$(this).toggle(new Date($(this).find('td:first-child').text()).getTime() >= (value))
//console.log(new Date($(this).find('td:first-child').text()).getTime());
});
//clean from
var val = $(this).val();
if(val.length === 0) {
$("#my-table").find('tr').show();
}
});
//TO
$("#to").bind("keyup change", function() {
var value = new Date($(this).val().toLowerCase()).getTime();
//console.log(value);
$("#my-table").find('tr').filter(function() {
$(this).toggle(new Date($(this).find('td:first-child').text().toLowerCase()).getTime() <= (value))
});
//clean to
var val = $(this).val();
if(val.length === 0) {
$("#my-table").find('tr').show();
}
});
});.container input {
width:25%;
display:inline-block;
margin-bottom:20px;
}
.list-group {
border:1px solid #1896f3;
padding:20px;
}
.list-group td, th {
border:1px solid #1896f3;
padding:7px 100px;
text-align:center;
}
th {
text-align: center !important;
font-size:14px;
text-transform:uppercase;
}<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
Date from : <input class="form-control" id="from" type="date">
to : <input class="form-control" id="to" type="date">
<input class="form-control" id="name" type="text" placeholder="Enter your name...">
<br>
<table>
<thead>
<tr>
<th>Date</th>
<th>Name</th>
</tr>
</thead>
<tbody id="my-table">
<tr class="list-group">
<td>2019-11-21</td>
<td>kal</td>
</tr>
<tr class="list-group">
<td >2015-01-01</td>
<td>blake</td>
</tr>
<tr class="list-group">
<td>2015-01-30</td>
<td>secure</td>
</tr>
<tr class="list-group">
<td>2016-03-10</td>
<td>home</td>
</tr>
<tr class="list-group">
<td>2019-05-19</td>
<td>car</td>
</tr>
<tr class="list-group">
<td>2014-09-10</td>
<td>yop</td>
</tr>
<tr class="list-group">
<td>2017-12-30</td>
<td>wick</td>
</tr>
</tbody>
</table>
</div>