2

He estado viendo varias páginas respecto a este tema y encontré una que explica de manera sencilla el uso de rangos solo que lo usan con edad (range filtering). Luego encontré esta (range dates) para usarlo con fechas, pero no me arroja la búsqueda ni siquiera la hace. ¿que estoy haciendo mal? o se necesita más configuraciones, ¿se supone que solo deberíamos cambiar los id de los input, no?

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

Puse mi librería que indica ahí en la página:

<script type="text/javascript" src="jquery/range_dates.js"></script>

Luego mi código que indica ahí en la página también:

$(document).ready(function() {
      var table = $('#exportar').DataTable();

      // Add event listeners to the two range filtering inputs
      $('#min').keyup( function() { table.draw(); } );
      $('#max').keyup( function() { table.draw(); } );
  } );

Mis inputs con sus id:

 fecha inicio: <input id="min" name="min" type="text" placeholder="Search by Date" />
 fecha final: <input id="max" name="max" type="text" placeholder="Search by Date" />

Y por último este cogido es el que viene en la librería range_dates.js que puse, pero a lo que leí también se configuraba cambiando los id:

$.fn.dataTableExt.afnFiltering.push(
    function( oSettings, aData, iDataIndex ) {
        var iFini = document.getElementById('#min').value;
        var iFfin = document.getElementById('#max').value;
        var iStartDateCol = 6;
        var iEndDateCol = 7;

        iFini=iFini.substring(6,10) + iFini.substring(3,5)+ iFini.substring(0,2);
        iFfin=iFfin.substring(6,10) + iFfin.substring(3,5)+ iFfin.substring(0,2);

        var datofini=aData[iStartDateCol].substring(6,10) + aData[iStartDateCol].substring(3,5)+ aData[iStartDateCol].substring(0,2);
        var datoffin=aData[iEndDateCol].substring(6,10) + aData[iEndDateCol].substring(3,5)+ aData[iEndDateCol].substring(0,2);

        if ( iFini === "" && iFfin === "" )
        {
            return true;
        }
        else if ( iFini <= datofini && iFfin === "")
        {
            return true;
        }
        else if ( iFfin >= datoffin && iFini === "")
        {
            return true;
        }
        else if (iFini <= datofini && iFfin >= datoffin)
        {
            return true;
        }
        return false;
    }
);
7
  • ya verificaste que los substring que se hacen concuerdan con el formato de fecha que estas ingresando y el que estas mostrando en la tabla?. el 12 jun. 2019 a las 17:25
  • el formato de fecha que ingreso y muestro es asi: Y/m/d y no e revisado el substring para que se utiliza? el 12 jun. 2019 a las 17:32
  • adicional las variables iStartDateCol y iEndDateCol estan apuntando a las columnas de tu tabla, esos son los indices?. El ejemplo que dejas filtra un rango de fechas para dos columnas. En tu caso tbn vas a utilizar dos columnas? el 12 jun. 2019 a las 17:35
  • En el ejemplo si ingresas: 30/01/2019 al aplicarle los substring devolvera: 20190130 el 12 jun. 2019 a las 17:49
  • el ejemplo que puse es el que esta en la pagina oficial de datatable lo quería utilizar para mi proyecto lo único que cambie fueron los id, pensado que funcionaria como el plugin datatable que por defualt lanza el search , paginado etc el 12 jun. 2019 a las 17:49

2 respuestas 2

2

Te dejo el siguiente ejemplo para que pruebes y lo adaptes a tu tabla.

  • En el mismo veras que utilizo replace para reemplazar los guiones.
  • El indexCol deberás colocar el índice de la columna. (basado en la imagen que dejas se aprecia que es el índice 1).

El evento keyup:

$(document).ready(function() {  
    var table = $('#exportar').DataTable();

    $('#min,#max').keyup( function() {
        table.draw();
    });
});

Búsqueda de rango de fechas:

$.fn.dataTable.ext.search.push(
    function(oSettings, aData, iDataIndex) {

        var dateIni = $('#min').val();
        var dateFin = $('#max').val();

        var indexCol = 1;

        dateIni = dateIni.replace(/-/g, "");
        dateFin= dateFin.replace(/-/g, "");

        var dateCol = aData[indexCol].replace(/-/g, "");

        if (dateIni === "" && dateFin === "")
        {
            return true;
        }

        if(dateIni === "")
        {
            return dateCol <= dateFin;
        }

        if(dateFin === "")
        {
            return dateCol >= dateIni;
        }

        return dateCol >= dateIni && dateCol <= dateFin;
    }
);

Recuerda que cualquier cambio de formato de la fechas deberás modificar el search.push.
Si necesitas comparar solo al ingresar una fecha completa, entonces deberás validar el length (de dateIni y dateFin) después del replace que sea igual a 8.

6
  • perfecto ya hace la búsqueda ya toma valores pero hay un detalle por ejemplo si yo puse fecha inicial: 2019-05-14 y fecha final 2019-06-12 me muestra la fecha del 2019-05-13 2019-05-12 esas están fuera del rango seleccionado el 12 jun. 2019 a las 19:09
  • también si pongo un rango de un día de diferencia no me arroja todos los registros que hay solo algunos por ejemplo del 2019-06-11 al 2019-06-12 el 12 jun. 2019 a las 19:22
  • a lo mejor es por que en mi tabla tengo mas campos con fechas y toma el valor de los otros campos no ? el 12 jun. 2019 a las 19:41
  • No creo que sea eso. por que la variable indexCol indica la columna. al menos que el valor de 1 este apuntando a otra columna. Es muy importante que coloques el indice correcto a indexCol el 12 jun. 2019 a las 19:45
  • Cuantas columnas tiene tu tabla, empieza a contar desde cero hasta la columna de la fecha que quieres hacer la busqueda y ese sera el indice. el 12 jun. 2019 a las 19:47
1

esto utilizo yo en mi tabla para hacer un daterangepicker, espero te pueda servir mi input es:

 "Seleccionar entre fechas: <input id='Date_search' type='text' placeholder='Buscar por Fecha' style='width: 200px' /><br><br>";

minDateFilter = "";
maxDateFilter = "";
$.fn.dataTableExt.afnFiltering.push(
    function(oSettings, aData, iDataIndex) {
        if (typeof aData._date == 'undefined') {
            aData._date = new Date(aData[2]).getTime();
        }

        if (minDateFilter && !isNaN(minDateFilter)) {
            if (aData._date < minDateFilter) {
                return false;
            }
        }

        if (maxDateFilter && !isNaN(maxDateFilter)) {
            if (aData._date > maxDateFilter) {
                return false;
            }
        }
        return true;
    }
);

$(document).ready(function() {
    $("#Date_search").val("");
    var groupColumn = 0;
    var table = $('#salarios').DataTable({})
)};


    $("#Date_search").daterangepicker({
        "locale": {
            "format": "DD-MM-YYYY",
            "separator": " hasta ",
            "applyLabel": "Buscar",
            "cancelLabel": "Cancelar",
            "fromLabel": "desde",
            "toLabel": "hasta",
            "customRangeLabel": "Custom",
            "weekLabel": "W",
            "daysOfWeek": [
                "Su",
                "Mo",
                "Tu",
                "We",
                "Th",
                "Fr",
                "Sa"
            ],
            "monthNames": [
                "Enero",
                "Febrero",
                "Marzo",
                "Abril",
                "Mayo",
                "Junio",
                "Julio",
                "Agosto",
                "Septiembre",
                "Octubre",
                "Noviembre",
                "Diciembre"
            ],
            "firstDay": 1
        },
        "opens": "center",
    }, function(start, end, label) {
        maxDateFilter = end;
        minDateFilter = start;
        table.draw();
    });

Este es el cdn de daterangepicker:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
4
  • para este ejemplo tengo que usar la librería de daterangepicker.min.js ? el 12 jun. 2019 a las 18:11
  • si, tienes que usar esa libreria
    – KeTeMeTo
    el 12 jun. 2019 a las 18:12
  • puse las librerías pero no del cdn sino directas en mi proyecto pero no me funciona ni si quiera me genera los calendarios para tomar la fecha el 12 jun. 2019 a las 18:51
  • @jasieltorres pero te da algún error en la consola?
    – KeTeMeTo
    el 13 jun. 2019 a las 7:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.