可以使用JavaScript来实现在按钮点击时不使用DateTimePicker进行筛选的功能。下面是一个示例代码:
HTML部分:
JavaScript部分:
// 初始化日期选择器
$(document).ready(function() {
$('#startDate').datepicker();
$('#endDate').datepicker();
});
// 筛选按钮点击事件处理
$('#filterBtn').click(function() {
var startDate = $('#startDate').val();
var endDate = $('#endDate').val();
// 获取表格中的所有行
var rows = $('#dataTable').find('tr');
// 遍历每一行,根据日期范围进行筛选
rows.each(function() {
var row = $(this);
var date = row.find('.dateColumn').text(); // 假设日期信息在class为dateColumn的单元格中
// 检查日期是否在范围内,如果不在则隐藏该行
if (date < startDate || date > endDate) {
row.hide();
} else {
row.show();
}
});
});
上述代码使用了jQuery库来处理日期选择器和DOM操作。在HTML部分,需要引入jQuery库和jQuery UI库(用于日期选择器)的相关文件。然后在JavaScript部分,通过datepicker()
方法初始化日期选择器,并在筛选按钮点击事件中获取用户选择的日期范围,并根据范围对表格中的行进行筛选。