如何过滤开始日期和结束日期的数据日期，如果我有表格数据？
问题描述：
如何过滤开始日期和结束日期的数据日期，如果我有表格数据？如何过滤开始日期和结束日期的数据日期，如果我有表格数据？
使用jQuery和JavaScript我有一些数据，我想筛选此表中的IM数据搜索到谷歌，但没有找到任何解决方案，请帮助我嗨IM现在我的代码是这样
$(document).ready(function(){
$('#submitAction').on('click', function(){
var startDate = $('#startDate').val();
var endDate = $('#endDate').val();
alert("My Value is "+ startDate + endDate);
if((startDate == null || startDate == '') && (endDate == null || endDate == '')){
alert("Please fill the correct start and end date");
}else{
alert("Success" +startDate + endDate);
}
return false;
});
});body{
font-family: arial;
font-size: 14px;
color:#000000;
}
.table-bordered {
border: 1px solid #ddd;
width: 800px;
background-color: transparent;
border-spacing: 0;
border-collapse: collapse;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
margin: 0 auto;
}
.table-bordered>thead>tr>th {
border-bottom-width: 2px;
vertical-align: bottom;
border-bottom: 2px solid #ddd;
padding: 8px;
text-align: left;
}
.table-bordered>tbody>tr>td{
padding: 8px;
vertical-align: top;
border: 1px solid #ddd;
}
.dataFilter{
display: block;
width: 800px;
margin: 20px auto;
}
.inputGroup label,
.inputGroup input{
display: inline-block;
vertical-align: top;
}
.inputGroup + .inputGroup{
margin-top: 10px;
}
.inputGroup label{
width: 150px;
}
.inputGroup input{
font-family: arial;
font-size: 14px;
line-height: 30px;
display: inline-block;
vertical-align: top;
width: 263px;
padding: 0;
padding-left: 10px;
margin: 0;
height: 28px;
border: 1px solid #ccc;
border-radius: 4px;
color: #a9abaa;
outline: 0;
}
.dataFilter button{
border-radius: 5px;
font-size: 12px;
font-weight: 200;
height: 25px;
width: 70px;
border: 0;
outline: 0;
cursor: pointer;
background-color: #ccc;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="dataFilter" action="#" method="post" name="">
<div class="inputGroup">
<label for="startDate">Start Date</label>
<input type="text" value="" name="startDate" id="startDate" />
</div>
<div class="inputGroup">
<label for="endDate">End Date</label>
<input type="text" value="" name="endDate" id="endDate" />
</div>
<button id="submitAction">Submit</button>
</form>
\t \t \t <table cellpadding="0" cellspacing="0" border="0" class="table-bordered">
\t \t \t <thead>
\t \t \t <th>S.no</th>
\t \t \t <th>Name</th>
\t \t \t <th>Email ID</th>
\t \t \t <th>Mobile No</th>
\t \t \t <th>Date</th>
\t \t \t </thead>
\t \t \t <tbody id="userData">
<tr>
<td>1</td>
<td>Rohit</td>
<td>[email protected]</td>
<td>9654798949</td>
<td>2015-07-21</td>
</tr>
<tr>
<td>1</td>
<td>Rohit</td>
<td>[email protected]</td>
<td>9654798949</td>
<td>2015-07-08</td>
</tr>
<tr>
<td>1</td>
<td>Rohit</td>
<td>[email protected]</td>
<td>9654798949</td>
<td>2015-07-15</td>
</tr>
<tr>
<td>1</td>
<td>Rohit</td>
<td>[email protected]</td>
<td>9654798949</td>
<td>2015-07-21</td>
</tr>
<tr>
<td>1</td>
<td>Rohit</td>
<td>[email protected]</td>
<td>9654798949</td>
<td>2015-07-09</td>
</tr>
<tr>
<td>1</td>
<td>Rohit</td>
<td>[email protected]</td>
<td>9654798949</td>
<td>2015-07-12</td>
</tr>
<tr>
<td>1</td>
<td>Rohit</td>
<td>[email protected]</td>
<td>9654798949</td>
<td>2015-06-22</td>
</tr>
\t \t \t </tbody>
\t \t \t </table>
答
什么是这样的：
$(document).ready(function() {
var tableDateCellIndex = 4;
$('#submitAction').on('click', function (evt) {
var startDate = parseDate($('#startDate').val());
var endDate = parseDate($('#endDate').val());
if (isNaN(startDate.getDate()) || isNaN(endDate.getDate())) {
alert("Please fill the correct start and end date");
} else {
var rows = $("#userData").find("tr");
$.each(rows, function (index, row) {
var rowDate = parseDate($($(row).find("td")[tableDateCellIndex]).text());
if (rowDate < startDate || rowDate > endDate) {
// could take an action other than hiding the row with the date outside of the specified range
$(row).hide();
}
});
}
return false;
});
// parse a date in yyyy-mm-dd format
function parseDate(input) {
var parts = input.split('-');
// new Date(year, month [, day [, hours[, minutes[, seconds[, ms]]]]])
return new Date(parts[0], parts[1] - 1, parts[2]);
}
});
试试这个... HTTPS：//jquery-datatables-column-filter.googlecode.com/svn/trunk/dateRange.html –
您是否期望开始日期和结束日期的输入格式与表格中使用的相同（yyyy-MM-dd）？ – HashPsi