jquery - 如何使用 DATETIMEPICKER 按日期过滤 HTML 表?
问题描述
这是我的桌子:
<input id="myInput" type="text" name="myInputSearches" placeholder="Week..." style="margin-top:4px">
<label class="noResults" align="right" style="display:none; color:red"><b><i>No Match Found</i></b></label>
....
<tbody id="myTable">
{% for event in eventList %}
<tr>
<td><div style="width:100px">{{ event.week|date:"d-m-Y" }}</div></td>
<td><div style="width:200px; text-transform: uppercase">{{ event.name }}</div></td>
<td><div id="day0" style="width:200px; text-transform: uppercase">{{ event.sunday }}</div></td>
<td><div id="day1" style="width:200px; text-transform: uppercase">{{ event.monday }}</div></td>
<td><div id="day2" style="width:200px; text-transform: uppercase">{{ event.tuesday }}</div></td>
<td><div id="day3" style="width:200px; text-transform: uppercase">{{ event.wednesday }}</div></td>
<td><div id="day4" style="width:200px; text-transform: uppercase">{{ event.thursday }}</div></td>
<td><div id="day5" style="width:200px; text-transform: uppercase">{{ event.friday }}</div></td>
<td><div id="day6" style="width:200px; text-transform: uppercase">{{ event.saturday }}</div></td>
</tr>
{% endfor %}
</tbody>
这是我当前用于过滤表的 jQuery:
<script> //No Results message
$(document).ready(function () {
(function ($) {
$("#myInput").keyup(function () {
var rex = new RegExp($(this).val(), "i");
$("#myTable tr").hide();
$("#myTable tr").filter(function () {
return rex.test($(this).text());
}).show();
$(".noResults").hide();
if($("#myTable tr:visible").length == 0) {
$(".noResults").show();
}
})
}(jQuery));
});
我目前可以在输入查询时进行过滤。我想使用 datetimepicker 选择一个日期,然后过滤表格。
这就是我为“myInput”实现 datetimepicker 的方式:
$(function () {
$('#myInput').datetimepicker({
format:'DD-MM-YYYY',
});
$('#myInput').on('dp.change', function (e) {
var value = $("#myInput").val();
var firstDate = moment(value, "DD/MM/YYYY").day(0).format("DD/MM/YYYY");
$("#myInput").val(firstDate);
});
});
但是每当我选择一个日期时,表格都不会过滤。我认为这是由于“keyUp”功能,但我不确定将其更改为什么。
解决方案
在您的情况下,您需要以编程方式从dp.change
.
或者
将您的代码放在 datetimepicker 的dp.change
事件处理程序中。
$(document).ready(function () {
$('#myInput').datetimepicker({
format: 'DD-MM-YYYY',
});
$('#myInput').on('dp.change', function (e) {
var rex = new RegExp($(this).val(), "i");
$("#myTable tr").hide();
$("#myTable tr").filter(function () {
return rex.test($(this).text());
}).show();
$(".noResults").hide();
if ($("#myTable tr:visible").length == 0) {
$(".noResults").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<div class='col-sm-6'>
<div class="form-group" style="position:relative">
<div class='input-group date' id='datetimepicker1'>
<input id="myInput" type="text" name="myInputSearches" class="form-control" >
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<label class="noResults" align="right" style="display:none; color:red"><b><i>No Match Found</i></b></label>
<table>
<tbody id="myTable">
<tr>
<td><div style="width:200px; text-transform: uppercase">name </div></td>
<td><div id="day0" style="width:200px; text-transform: uppercase">23-01-2019 </div></td>
<td><div id="day1" style="width:200px; text-transform: uppercase">monday</div></td>
<td><div id="day2" style="width:200px; text-transform: uppercase"> tuesday </div></td>
<td><div id="day3" style="width:200px; text-transform: uppercase">wednesday </div></td>
<td><div id="day4" style="width:200px; text-transform: uppercase">thursday</div></td>
<td><div id="day5" style="width:200px; text-transform: uppercase">friday </div></td>
<td><div id="day6" style="width:200px; text-transform: uppercase"> saturday</div></td>
</tr>
<tr>
<td><div style="width:200px; text-transform: uppercase">name </div></td>
<td><div id="day0" style="width:200px; text-transform: uppercase">30-01-2019 </div></td>
<td><div id="day1" style="width:200px; text-transform: uppercase">monday</div></td>
<td><div id="day2" style="width:200px; text-transform: uppercase"> tuesday </div></td>
<td><div id="day3" style="width:200px; text-transform: uppercase">wednesday </div></td>
<td><div id="day4" style="width:200px; text-transform: uppercase">thursday</div></td>
<td><div id="day5" style="width:200px; text-transform: uppercase">friday </div></td>
<td><div id="day6" style="width:200px; text-transform: uppercase"> saturday</div></td>
</tr>
</tbody>
<table>
推荐阅读
- parallel-processing - OpenMP 是否将多个原子指令视为单个关键部分?
- c - 逻辑或:不计算第二个操作数(6.5.14.4),但编译器生成警告:违反标准?
- android - AWS 移动开发工具包库会因为 Amplify 而消失吗?
- android - 在循环中改造入队太慢
- javascript - 将值推送到数组但作为对象?JS
- r - 如何用 r 中的向量替换数据框中的字段名称?
- python - math.lcm() 给出错误“模块'math'没有'lcm'成员”
- powershell - 如何将命令的输出(get-random)传递给变量?
- node.js - 如何通过节点 js lambda 函数的授权向 iotdata 服务发送发布请求
- python - 如何在for循环中打印整数?