Как фильтровать диапазон дат в DataTables?

У меня есть большой dataTable, который содержит информацию о поездке. Каждая строка имеет начало datetime и конечное datetime следующего формата (yyyy-mm-dd HH: mm: ss). Как использовать параметр datepicker для установки диапазона фильтров в dataTables? Я хочу иметь datepicker, который выбирает только день, а не время. Я искал везде для правильного ответа, но я не мог его найти. Заранее благодарим за помощь.

Например, я хочу видеть все строки июля, выбрав (01-07-2016 - 31-07-2016).

5
02 авг. '16 в 13:09
источник поделиться
3 ответов

Здесь DataTable с одиночным DatePicker как "из" фильтра даты

LiveDemo

Здесь DataTable с двумя DatePickers для фильтра DateRange (To и From)

LiveDemo

12
02 авг. '16 в 14:15
источник

Вот мое решение, собранное из примера фильтра диапазона в 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 Here

Примечания

  • Использование момента отделяет логику сравнения дат и упрощает работу с различными форматами. В моей таблице я использовал yyyy-mm-dd, но вы могли бы использовать mm/dd/yyyy. Обязательно укажите моментальные документы при разборе других форматов, поскольку вам может потребоваться изменить какой метод вы используете.
1
20 апр. '17 в 8:12
источник

Следуйте приведенной ниже ссылке и настройте ее на то, что вам нужно. Daterangepicker делает это для вас очень легко.:)

http://www.daterangepicker.com/#ex1

0
02 авг. '16 в 13:17
источник

Посмотрите другие вопросы по меткам или Задайте вопрос