¿Cómo filtro el rango de fechas en DataTables?

Solución:

Aquí está DataTable con soltero DatePicker como “desde” Filtro de fecha

Demo en vivo

Aquí está DataTable con dos DatePickers para el filtro DateRange (To and From)

Demo en vivo

Aquí está mi solución, improvisada a partir del ejemplo de filtro de rango en los documentos de tablas de datos, y dejar que moment.js haga el trabajo sucio de comparar las fechas.

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

Instale el momento: 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 aquí

Notas

• El uso de momento desacopla la lógica de comparación de fechas y facilita el trabajo con diferentes formatos. En mi mesa usé yyyy-mm-dd, pero podrías usar mm/dd/yyyy así como. Asegúrese de hacer referencia a los documentos de moment cuando analice otros formatos, ya que es posible que deba modificar el método que usa.

 $.fn.dataTable.ext.search.push(
    function (settings, data, dataIndex) {
        var FilterStart = $('#filter_From').val();
        var FilterEnd = $('#filter_To').val();
        var DataTableStart = data[4].trim();
        var DataTableEnd = data[5].trim();
        if (FilterStart == '' || FilterEnd == '') {
            return true;
        }
        if (DataTableStart >= FilterStart && DataTableEnd <= FilterEnd)
        {
            return true;
        }
        else {
            return false;
        }
        
    });
    --------------------------
 $('#filter_From').change(function (e) {
        Table.draw();

    });
    $('#filter_To').change(function (e) {
          Table.draw();

    });

---

---

Utiliza Nuestro Buscador