我有一个包含骑行信息的大型数据表。每行都有以下格式的开始日期时间和结束日期时间（yyyy-mm-dd HH:mm:ss）。如何使用日期选择器在 dataTables 中设置过滤范围？我想要一个日期选择器，它只选择一天而不是时间。我到处寻找正确的答案，但找不到。提前感谢您的帮助。
例如，我想通过选择 (01-07-2016 - 31-07-2016) 查看 7 月的所有行。
【问题讨论】：
$.fn.dataTable.ext.search 数组。 See the documentation for more info.
标签： javascript datetime filter datatables
【讨论】：
$.fn.dataTableExt.afnFiltering 是 DataTable 的 api。
这是我的解决方案，由datatables docs 中的范围过滤器示例拼凑而成，并让moment.js 完成比较日期的繁琐工作。
<input
type="text"
id="min-date"
class="date-range-filter"
placeholder="From: yyyy-mm-dd">
<input
type="text"
id="max-date"
class="date-range-filter"
placeholder="To: yyyy-mm-dd">
<table id="my-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Created At</th>
</tr>
</thead>
</table>
安装时刻：npm install moment
// Assign moment to global namespace
window.moment = require('moment');
// Set up your table
table = $('#my-table').DataTable({
// ... do your thing here.
});
// Extend dataTables search
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = $('#min-date').val();
var max = $('#max-date').val();
var createdAt = data[2] || 0; // Our date column in the table
if (
( min == "" || max == "" )
||
( moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max) )
)
{
return true;
}
return false;
}
);
// Re-draw the table when the a date range filter changes
$('.date-range-filter').change( function() {
table.draw();
} );
yyyy-mm-dd，但您也可以使用mm/dd/yyyy。请务必参考moment's docs when parsing other formats，因为您可能需要修改您使用的方法。【讨论】：
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var FilterStart = $('#filter_From').val();
var FilterEnd = $('#filter_To').val();
var DataTableStart = data[4].trim();
var DataTableEnd = data[5].trim();
if (FilterStart == '' || FilterEnd == '') {
return true;
}
if (DataTableStart >= FilterStart && DataTableEnd <= FilterEnd)
{
return true;
}
else {
return false;
}
});
--------------------------
$('#filter_From').change(function (e) {
Table.draw();
});
$('#filter_To').change(function (e) {
Table.draw();
});【讨论】：
这是我的解决方案，没有办法使用 momemt.js。这是带有两个 DatePicker 用于 DateRange（To 和 From）过滤器的 DataTable。
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var min = $('#min').datepicker("getDate");
var max = $('#max').datepicker("getDate");
var startDate = new Date(data[4]);
if (min == null && max == null) { return true; }
if (min == null && startDate <= max) { return true; }
if (max == null && startDate >= min) { return true; }
if (startDate <= max && startDate >= min) { return true; }
return false;
}
);
【讨论】：
点击下面的链接并将其配置为您需要的内容。 Daterangepicker 很容易为您完成。 :)
【讨论】：
以下一个在 Moments js 2.10 及更高版本上运行良好
$.fn.dataTableExt.afnFiltering.push(
function( settings, data, dataIndex ) {
var min = $('#min-date').val()
var max = $('#max-date').val()
var createdAt = data[0] || 0; // Our date column in the table
//createdAt=createdAt.split(" ");
var startDate = moment(min, "DD/MM/YYYY");
var endDate = moment(max, "DD/MM/YYYY");
var diffDate = moment(createdAt, "DD/MM/YYYY");
//console.log(startDate);
if (
(min == "" || max == "") ||
(diffDate.isBetween(startDate, endDate))
) { return true; }
return false;
}
);
【讨论】：
var endDate = moment(max).add('1','days'); 如果您希望日期包含在内。
使用其他海报代码进行一些调整：
<table id="MainContent_tbFilterAsp" style="margin-top:-15px;">
<tbody>
<tr>
<td style="vertical-align:initial;"><label for="datepicker_from" id="MainContent_datepicker_from_lbl" style="margin-top:7px;">From date:</label>
</td>
<td style="padding-right: 20px;"><input name="ctl00$MainContent$datepicker_from" type="text" id="datepicker_from" class="datepick form-control hasDatepicker" autocomplete="off" style="cursor:pointer; background-color: #FFFFFF">
</td>
<td style="vertical-align:initial"><label for="datepicker_to" id="MainContent_datepicker_to_lbl" style="margin-top:7px;">To date:</label>
</td>
<td style="padding-right: 20px;"><input name="ctl00$MainContent$datepicker_to" type="text" id="datepicker_to" class="datepick form-control hasDatepicker" autocomplete="off" style="cursor:pointer; background-color: #FFFFFF">
</td>
<td style="vertical-align:initial"><a onclick="$('#datepicker_from').val(''); $('#datepicker_to').val(''); return false;" id="datepicker_clear_lnk" style="margin-top:7px;">Clear</a></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$(function() {
var oTable = $('#tbAD').DataTable({
"oLanguage": {
"sSearch": "Filter Data"
},
"iDisplayLength": -1,
"sPaginationType": "full_numbers",
"pageLength": 50,
});
$("#datepicker_from").datepicker();
$("#datepicker_to").datepicker();
$('#datepicker_from').change(function (e) {
oTable.draw();
});
$('#datepicker_to').change(function (e) {
oTable.draw();
});
$('#datepicker_clear_lnk').click(function (e) {
oTable.draw();
});
});
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var min = $('#datepicker_from').datepicker("getDate") == null ? null : $('#datepicker_from').datepicker("getDate").setHours(0,0,0,0);
var max = $('#datepicker_to').datepicker("getDate") == null ? null : $('#datepicker_to').datepicker("getDate").setHours(0,0,0,0);
var startDate = new Date(data[9]).setHours(0,0,0,0);
if (min == null && max == null) { return true; }
if (min == null && startDate <= max) { return true; }
if (max == null && startDate >= min) { return true; }
if (startDate <= max && startDate >= min) { return true; }
return false;
}
);
});
</script>
【讨论】：