1

Estou usando umas das funções do DataTables que é a pesquisa por intervalo, porém esse tipo de pesquisa so aceita números inteiro. Gostaria de fazer com que essa pesquisa aceitasse formatos de data exemplo 10/10/2019. não sei por onde começa https://datatables.net/examples/plug-ins/range_filtering.html

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

$.fn.dataTable.ext.search.push(
    function (settings, data, dataIndex) {
        var min = parseInt($('#min').val(), 10);
        var max = parseInt($('#max').val(), 10);
        var age = parseFloat(data[0]) || 0; // use data for the age column

        if ((isNaN(min) && isNaN(max)) ||
            (isNaN(min) && age <= max) ||
            (min <= age && isNaN(max)) ||
            (min <= age && age <= max)) {
            return true;
        }
        return false;
    }
);
1
  • Desculpa a pergunta, porem quer filtrar alguma informação de um BD que utilize período de data ? Não consegui entender muito bem sua necessidade. Commented 1/11/2019 às 20:36

3 Respostas 3

3
+50

Você pode utilizar o mesmo conceito de parseInt que já usa para a idade, porém com formato diferente, no exemplo a seguir, a data do datepicker será formatada para um padrão yyyymmdd (note a função parseDateValue), veja no exemplo completo:

function parseDateValue(rawDate) {
    var dateArray = rawDate.split("/");
    var parsedDate = dateArray[2] + dateArray[1] + dateArray[0];
    return parsedDate;
}

$(document).ready(function() {
    $.fn.dataTable.ext.search.push(
        function(settings, data, dataIndex) {
            var dateStart = parseDateValue($("#min").val());
            var dateEnd = parseDateValue($("#max").val());
            var evalDate = parseDateValue(data[4]);

            if ((isNaN(dateStart)) || (isNaN(dateEnd))) {
                return true;
            }
            if (evalDate >= dateStart && evalDate <= dateEnd) {
                return true;
            } else {
                return false;
            }
        }
    );


    $("#min").datepicker({
        dateFormat: 'dd/mm/yy',
        onSelect: function() {
            table.draw();
        },
        changeMonth: true,
        changeYear: true
    });
    $("#max").datepicker({
        dateFormat: 'dd/mm/yy',
        onSelect: function() {
            table.draw();
        },
        changeMonth: true,
        changeYear: true
    });
    var table = $('#example').DataTable({
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Portuguese-Brasil.json"
        }
    } );

    $('#min, #max').change(function() {
        table.draw();
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

<table border="0" cellspacing="5" cellpadding="5">
    <tbody>
        <tr>
            <td>Data Inicial:</td>
            <td><input name="min" id="min" type="text" autocomplete="off"></td>
        </tr>
        <tr>
            <td>Data Final:</td>
            <td><input name="max" id="max" type="text" autocomplete="off"></td>
        </tr>
    </tbody>
</table>
<table width="100%" class="display" id="example" cellspacing="0">
    <thead>
        <tr>
            <th>Nome</th>
            <th>Profissão</th>
            <th>Localidade</th>
            <th>Idade</th>
            <th>Data de Inicio</th>
            <th>Salario</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Nome</th>
            <th>Profissão</th>
            <th>Localidade</th>
            <th>Idade</th>
            <th>Data de Inicio</th>
            <th>Salario</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Teste</td>
            <td>Arquiteto</td>
            <td>São Paulo</td>
            <td>61</td>
            <td>25/04/2011</td>
            <td>R$3208</td>
        </tr>
        <tr>
            <td>Teste</td>
            <td>Arquiteto</td>
            <td>São Paulo</td>
            <td>61</td>
            <td>25/04/2012</td>
            <td>R$3208</td>
        </tr>
        <tr>
            <td>Teste</td>
            <td>Arquiteto</td>
            <td>São Paulo</td>
            <td>61</td>
            <td>25/04/2013</td>
            <td>R$3208</td>
        </tr>
        <tr>
            <td>Teste</td>
            <td>Arquiteto</td>
            <td>São Paulo</td>
            <td>61</td>
            <td>25/04/2014</td>
            <td>R$3208</td>
        </tr>
        <tr>
            <td>Teste</td>
            <td>Arquiteto</td>
            <td>São Paulo</td>
            <td>61</td>
            <td>25/04/2015</td>
            <td>R$3208</td>
        </tr>
        <tr>
            <td>Teste</td>
            <td>Arquiteto</td>
            <td>São Paulo</td>
            <td>61</td>
            <td>25/04/2016</td>
            <td>R$3208</td>
        </tr>
        <tr>
            <td>Teste</td>
            <td>Arquiteto</td>
            <td>São Paulo</td>
            <td>61</td>
            <td>25/04/2017</td>
            <td>R$3208</td>
        </tr>
        <tr>
            <td>Teste</td>
            <td>Arquiteto</td>
            <td>São Paulo</td>
            <td>61</td>
            <td>25/04/2018</td>
            <td>R$3208</td>
        </tr>
        <tr>
            <td>Teste</td>
            <td>Arquiteto</td>
            <td>São Paulo</td>
            <td>61</td>
            <td>25/04/2019</td>
            <td>R$3208</td>
        </tr>
        <tr>
            <td>Teste</td>
            <td>Arquiteto</td>
            <td>São Paulo</td>
            <td>61</td>
            <td>25/06/2019</td>
            <td>R$3208</td>
        </tr>
        <tr>
            <td>Teste</td>
            <td>Arquiteto</td>
            <td>São Paulo</td>
            <td>61</td>
            <td>25/07/2019</td>
            <td>R$3208</td>
        </tr>
        <tr>
            <td>Teste</td>
            <td>Arquiteto</td>
            <td>São Paulo</td>
            <td>61</td>
            <td>25/08/2019</td>
            <td>R$3208</td>
        </tr>
        <tr>
            <td>Teste</td>
            <td>Arquiteto</td>
            <td>São Paulo</td>
            <td>61</td>
            <td>25/10/2019</td>
            <td>R$3208</td>
        </tr>
        <tr>
            <td>Teste</td>
            <td>Arquiteto</td>
            <td>São Paulo</td>
            <td>61</td>
            <td>25/11/2019</td>
            <td>R$3208</td>
        </tr>
    </tbody>
</table>

Código no GitHub para referência futura.

1
  • 1
    Resolveu meu problema, obrigado! Só vou aplicar no calendar do Semantic ui ao invés do datepicker. Commented 9/11/2019 às 1:40
2

Para facilitar você pode usar o Moment.js: https://momentjs.com/

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {                 
        const inicio = moment("01/10/2019","DD/MM/YYYY");
        const fim = moment("01/11/2019","DD/MM/YYYY");

        var data= moment(data[posicao],"DD/MM/YYYY");

        if (data >= inicio && data <= fim) {
            return true;
        } else {
            return false;
        }
    }
);
2

Você pode fazer dessa forma tb:

$(document).ready(function() {
   jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "extract-date-pre": function(value) {
        var date = $(value, 'span')[0].innerHTML;
        date = date.split('/');
        return Date.parse(date[1] + '/' + date[0] + '/' + date[2])
    },
    "extract-date-asc": function(a, b) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
    "extract-date-desc": function(a, b) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});
$('#leadtable').dataTable({
    language: {
        url: '//cdn.datatables.net/plug-ins/1.10.12/i18n/Hebrew.json'
    },
    columnDefs: [{
            type: 'extract-date',
            targets: [0]
        }
 
    ]
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .