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

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

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

6
datatables datetime filter javascript

5 ответов

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

возможность получения удаленного

здесь DataTable с DatePickers для фильтра DateRange (To и From)

возможность получения удаленного

18

вот мое решение, собранное из примера фильтра диапазона в datatables docs и момент.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 как хорошо. Обязательно ссылайтесь моментальные документы при разборе других форматов, как вам может потребоваться изменить, какой метод вы используете.
3

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

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

1

вот мое решение, нет способа использовать momemt.js.Вот DataTable с двумя DatePickers для фильтра 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;
    }
0

следующий работает нормально с моментами 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;

        }
    );
0