如何在DataTables中过滤日期范围？

Question

我有一个包含乘坐信息的大型dataTable.每行都有以下格式的开始日期时间和结束日期时间(yyyy-mm-dd HH:mm:ss).如何使用datepicker在dataTables中设置过滤范围？我想要一个只选择一天而不是时间的日期选择器.我到处寻找正确的答案,但我找不到它.在此先感谢您的帮助.

例如,我想通过选择(01-07-2016 - 31-07-2016)来查看7月的所有行.

Answer 1

这是DataTable单一DatePicker作为"从"日期过滤器

LiveDemo

这里DataTable有两个DatePickersDateRange(To和From)过滤器

LiveDemo

Answer 2

这是我的解决方案，从datatables docs中的范围过滤器示例中整理而成，然后让moment.js进行比较日期的工作。

的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

安装时刻： 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在这里

笔记

• 使用力矩可以消除日期比较逻辑的耦合，并使其易于使用不同的格式。在我的表中，我使用yyyy-mm-dd，但您也可以使用mm/dd/yyyy。解析其他格式时，请务必参考一下moment的文档，因为您可能需要修改使用的方法。