按日期范围从到过滤表格列表 [英] Filter table list by date range from and to
本文介绍了按日期范围从到过滤表格列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想用name和date:from和to字段过滤我的表列表，名称可以正常工作，但是from和to的日期不能正常工作.
I want to filter my table list with name and date : from and to fields, the name works fine but the date from and to doesn't work correctly.
这是我的代码:
$(function(){
//name part
$("#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 part
$("#from").bind("keyup change", function() {
var value = $(this).val().toLowerCase();
$("#my-table").find('tr').filter(function() {
$(this).toggle($(this).find('td').text().toLowerCase()<(value))
});
//case if date is empty, we display all the list
if(value.length === 0) {
$("#my-table").find('tr').show();
}
});
//to part
$("#to").bind("keyup change", function() {
var value = $(this).val().toLowerCase();
$("#my-table").find('tr').filter(function() {
$(this).toggle($(this).find('td').text().toLowerCase()>(value))
});
});
});
.container input {
width:25%;
display:inline-block;
margin-bottom:20px;
}
.list-group {
border:1px solid #eaeaea;
padding:20px;
}
.list-group td, th {
border:1px solid #eaeaea;
padding:5px 50px;
text-align:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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="Search by name...">
<br>
<table>
<thead>
<tr>
<th>Date</th>
<th>Name</th>
</tr>
</thead>
<tbody id="my-table">
<tr class="list-group">
<td >2015-01-01</td>
<td>John</td>
</tr>
<tr class="list-group">
<td>2015-01-30</td>
<td>notif</td>
</tr>
<tr class="list-group">
<td>2016-03-10</td>
<td>food</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>
推荐答案
希望此代码将正确运行.
Hope this code will work correctly.
$(function() {
//name part
$("#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,#to").bind('keyup change', function() {
var val1 = moment($('#from').val().toLowerCase(), 'YYYY/MM/DD');
var val2 = moment($('#to').val().toLowerCase(), 'YYYY/MM/DD');
$("#my-table").find('tr').filter(function() {
$(this).toggle((moment($(this).find('td').text().toLowerCase(),
'YYYY/MM/DD') >= (val1) || !val1["_isValid"]) && (moment($(this).find('td').text()
.toLowerCase(),
'YYYY/MM/DD') <= (val2) || !val2["_isValid"]))
});
//console.log(val1["_isValid"], val2["_isValid"]);
})
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
<style>
.container input {
width: 25%;
display: inline-block;
margin-bottom: 20px;
}
.list-group {
border: 1px solid #eaeaea;
padding: 20px;
}
.list-group td,
th {
border: 1px solid #eaeaea;
padding: 5px 50px;
text-align: center;
}
</style>
</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="Search by name...">
<br>
<table>
<thead>
<tr>
<th>Date</th>
<th>Name</th>
</tr>
</thead>
<tbody id="my-table">
<tr class="list-group">
<td>2019-07-08</td>
<td>John</td>
</tr>
<tr class="list-group">
<td>2015-01-30</td>
<td>notif</td>
</tr>
<tr class="list-group">
<td>2016-03-10</td>
<td>food</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>
这篇关于按日期范围从到过滤表格列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
