Datatables filter by date bug

Question

I have a table made with datatables with several filters and it works fine. The problem is that I have added a filter to filter by date range and, although the date selector is shown, it is marked and everything does not filter by the dates that I mark. Do you know where the problem is? By the way, the date I am working with is in DD MM YYYY format (Although if I have not made a mistake, the selector is the same).

I would also like to know if it is possible to translate the date picker into Spanish (the rest of the datatable is translated as seen in the code)

Thanks

var minDate, maxDate;
$.fn.dataTable.ext.search.push(
   function( settings, data, dataIndex ) {
       var min = minDate.val();
       var max = maxDate.val();
       var date = new Date( data[0] );

       if (
           ( min === null && max === null ) ||
           ( min === null && date <= max ) ||
           ( min <= date   && max === null ) ||
           ( min <= date   && date <= max )
       ) {
           return true;
       }
       return false;
   }
);
$(document).ready(function () {
  // Create date inputs
  minDate = new DateTime($('#min'), {
      format: 'Do MMMM YYYY'
  });
  maxDate = new DateTime($('#max'), {
      format: 'Do MMMM YYYY'
  });

    // Setup - add a text input to each footer cell
    $('#html5-extension thead tr')
        .clone(true)
        .addClass('filters')
        .appendTo('#html5-extension thead');

    var table = $('#html5-extension').DataTable({

        orderCellsTop: true,
        fixedHeader: true,


        footerCallback: function (row, data, start, end, display) {
        var api = this.api();

        // Remove the formatting to get integer data for summation
        var intVal = function (i) {
            return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
        };

        // Total over all pages
        total = api
            .column(7)
            .data()
            .reduce(function (a, b) {
                return intVal(a) + intVal(b);
            }, 0);

        // Total over this page
        pageTotal = api
            .column(7, { page: 'current' })
            .data()
            .reduce(function (a, b) {
                return intVal(a) + intVal(b);
            }, 0);

        // Update footer
        $(api.column(8).footer()).html('' + pageTotal.toFixed(2) + ' € / ' + total.toFixed(2) + ' €)');
    },

    "dom": 'B<"float-left"i><"float-right"f>t<"float-left"l><"float-right"p><"clearfix">',
    //"dom": 'Bfrtip<"lrtip"l>',
    "language": {
        "url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json"
    },
        initComplete: function () {
            var api = this.api();

            // For each column
            api
                .columns()
                .eq(0)
                .each(function (colIdx) {
                    // Set the header cell to contain the input element
                    var cell = $('.filters th').eq(
                        $(api.column(colIdx).header()).index()
                    );
                    var title = $(cell).text();
                    $(cell).html('');

                    // On every keypress in this input
                    $(
                        'input',
                        $('.filters th').eq($(api.column(colIdx).header()).index())
                    )
                        .off('keyup change')
                        .on('change', function (e) {
                            // Get the search value
                            $(this).attr('title', $(this).val());
                            var regexr = '({search})'; //$(this).parents('th').find('select').val();

                            var cursorPosition = this.selectionStart;
                            // Search the column for that value
                            api
                                .column(colIdx)
                                .search(
                                    this.value != ''
                                        ? regexr.replace('{search}', '(((' + this.value + ')))')
                                        : '',
                                    this.value != '',
                                    this.value == ''
                                )
                                .draw();
                        })
                        .on('keyup', function (e) {
                            e.stopPropagation();

                            $(this).trigger('change');
                            $(this)
                                .focus()[0]
                                .setSelectionRange(cursorPosition, cursorPosition);
                        });
                });
        },
        "ordering": false,
        "responsive": true,
       buttons: [
          {
            extend: 'copyHtml5',
            footer: true,
            text: 'Copiar',
            exportOptions: {
               columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]
           },
            text: ' Copiar'
          },
          {
            extend: 'excelHtml5',
            footer: true,
            autoFilter: true,
            sheetName: 'Facturas emitidas',
            exportOptions: {
               columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]
           },
            text: ' Generar Excel',
            filename: 'Listado de facturas emitidas',
          },
          {
            extend: 'pdfHtml5',
            footer: true,
            exportOptions: {
               columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]
           },
            text: ' Generar PDF',
            filename: 'Listado de facturas emitidas',
          },
          {
            extend: 'print',
            footer: true,
            exportOptions: {
               columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]
           },
            text: ' Imprimir',
          }
      ],
      "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Todos"]]
    });
    $('#min, #max').on('change', function () {
         table.draw();
     });
});

Datatables filter by date bug

0 Answers