Javascript 如何过滤数据表中的日期范围？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38717543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I filter date range in DataTables?
提问by Novy
I have a large dataTable which contains ride information. Every row has a start datetime and an end datetime of the following format(yyyy-mm-dd HH:mm:ss). How can I use a datepicker for setting a filter range in dataTables? I want to have a datepicker which only selects a day and not the time. I've searched everywhere for the proper answer but I couldn't find it. Thanks in advance for helping.
我有一个包含乘车信息的大数据表。每行都有以下格式的开始日期时间和结束日期时间（yyyy-mm-dd HH:mm:ss）。如何使用日期选择器在数据表中设置过滤器范围？我想要一个日期选择器，它只选择一天而不是时间。我到处寻找正确的答案，但找不到。提前感谢您的帮助。
For example I want to see all rows of July by selecting (01-07-2016 - 31-07-2016).
例如，我想通过选择 (01-07-2016 - 31-07-2016) 来查看 7 月的所有行。
回答by mmushtaq
回答by CJ Edgerton
Here is my solution, cobbled together from the range filter example in the datatables docs, and letting moment.jsdo the dirty work of comparing the dates.
这是我的解决方案，从数据表文档中的范围过滤器示例拼凑而成，并让moment.js完成比较日期的肮脏工作。
HTML
HTML
<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>
JS
JS
Install Moment: npm install moment
安装时刻： 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();
} );
JSFiddle Here
JSFiddle在这里
Notes
笔记
- Using moment decouples the date comparison logic, and makes it easy to work with different formats. In my table, I used
yyyy-mm-dd, but you could usemm/dd/yyyyas well. Be sure to reference moment's docs when parsing other formats, as you may need to modify what method you use.
回答by FarhadRahimi
$.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();
});回答by Jothi Kannan
Following one is working fine with moments js 2.10 and above
以下一个在 moment 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;
}
);
回答by Jomal Johny
Here is my solution, there is no way to use momemt.js.Here is DataTable with Two DatePickers for DateRange (To and From) Filter.
这是我的解决方案，无法使用 momemt.js.Here 是带有两个 DatePickers 的 DataTable，用于 DateRange（To 和 From）过滤器。
$.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;
}
回答by Jomal Johny
Follow the link below and configure it to what you need. Daterangepicker does it for you, very easily. :)
按照下面的链接，将其配置为您需要的。Daterangepicker 很容易为您完成。:)
