Дата поиска в датированных таблицах с использованием DatePicker

Question

Использование Datatables 1.10.19 и bootstrap-datepicker v1.8.0

Я пытаюсь отфильтровать столбец дат, но он не работает, и я не уверен, почему.Я могу отфильтровать все остальные данные, используя панель поиска по умолчанию, но средство выбора даты, похоже, ничего не делает.Когда я ищу диапазон дат, я не получаю результатов?

Я не уверен, что это из-за формата даты, который я использую (dd-mm-yyyy)?

Я создал скрипка и мой код указан ниже;

Примечание: пожалуйста, игнорируйте любые проблемы со стилем.

html

<div class="container">
    <div class="col-md-4 pull-right">
        <div class="input-group input-daterange">
            <input class="form-control date-range-filter" data-date-format="dd-mm-yyyy" id="min-date" placeholder="From:" type="text">
            <div class="input-group-addon">
                to
            </div><input class="form-control date-range-filter" data-date-format="dd-mm-yyyy" id="max-date" placeholder="To:" type="text">
        </div>
    </div>
</div>
<table class="table table-striped table-bordered" id="example" style="width:100%">
    <thead>
        <tr>
            <th>date</th>
            <th>Num</th>
            <th>Price</th>
            <th>Status</th>
            <th>Type</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd" role="row">
            <td class="sorting_1">27-03-2019</td>
            <td>521735</td>
            <td>£0.20</td>
            <td>overdue</td>
            <td>Card</td>
        </tr>
        <tr class="even" role="row">
            <td class="sorting_1">27-03-2019</td>
            <td>513938</td>
            <td>£1.20</td>
            <td>overdue</td>
            <td>Cash</td>
        </tr>
        <tr class="odd" role="row">
            <td class="sorting_1">27-03-2019</td>
            <td>523693</td>
            <td>£0.20</td>
            <td>overdue</td>
            <td>Cash</td>
        </tr>
        <tr class="even" role="row">
            <td class="sorting_1">27-03-2019</td>
            <td>493645</td>
            <td>£0.10</td>
            <td>overdue renewed</td>
            <td>Cash</td>
        </tr>
        <tr class="odd" role="row">
            <td class="sorting_1">27-03-2019</td>
            <td>521734</td>
            <td>£0.20</td>
            <td>overdue</td>
            <td>Card</td>
        </tr>
        <tr class="even" role="row">
            <td class="sorting_1">27-03-2019</td>
            <td>493646</td>
            <td>£0.10</td>
            <td>overdue renewed</td>
            <td>Cash</td>
        </tr>
        <tr class="odd" role="row">
            <td class="sorting_1">27-03-2019</td>
            <td>523691</td>
            <td>£0.10</td>
            <td>overdue renewed</td>
            <td>Card</td>
        </tr>
        <tr class="even" role="row">
            <td class="sorting_1">27-03-2019</td>
            <td>523692</td>
            <td>£0.10</td>
            <td>overdue renewed</td>
            <td>Card</td>
        </tr>
        <tr class="odd" role="row">
            <td class="sorting_1">27-03-2019</td>
            <td>523694</td>
            <td>£0.20</td>
            <td>overdue</td>
            <td>Cash</td>
        </tr>
        <tr class="even" role="row">
            <td class="sorting_1">26-03-2019</td>
            <td>506326</td>
            <td>£1.20</td>
            <td>overdue</td>
            <td>Card</td>
        </tr>
    </tbody>
</table>

JS

$(document).ready(function() {
    $('.input-daterange input').each(function() {
        $(this).datepicker('clearDates');
    });
    $('#example').DataTable({
        "order": [
            [0, "desc"]
        ],
        "columns": [{
            data: 'datePaid'
        }, {
            data: 'invoice'
        }, {
            data: 'amount'
        }, {
            data: 'chargeType'
        }, {
            data: 'paymentType'
        }, ],
        "columnDefs": [{
            targets: [0],
            type: 'date-eu'
        }],
    });
    // 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[0] || 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() {
        $('#records').DataTable().draw();
    });
});

Любая помощь приветствуется.

Answer 1

Чтобы получить ожидаемый результат, обновите даты в одном формате и проверьте диапазон

  var min = $('#min-date').val()? $('#min-date').val().split("-") : "";
  var max = $('#max-date').val()? $('#max-date').val().split("-") : "";

  var createdAt = data[0].split("-") || 0; // Our date column in the table

  createdAt = new Date(createdAt[1] + '/' + createdAt[0] + '/' + createdAt[2])
  min = min?new Date(min[1] + '/' + min[0] + '/' + min[2]): "";
  max = max?new Date(max[1] + '/' + max[0] + '/' + max[2]):"";

codepen - https://codepen.io/nagasai/pen/GebZNx

Чтобы избежать предупреждения о моменте, используйте новую дату ('MM/ ДД / ГГГГ ') для дат в формате -ДД / ММ / ГГГГ