I'm trying to use filters by date.
I have found several examples, but in one of them I am blocked because it puts the date and takes an example if I select 5 de mayo de 2018 begins to show me the data from 6.
The other thing is that, if I want to clean the filter, it does not. it leaves me static filtered data:
This is the code:
minDateFilter = "";
maxDateFilter = "";
$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex) {
if (typeof aData._date == 'undefined') {
aData._date = new Date(aData[0]).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 table = $('#tabla').DataTable({
language: {
"decimal": "",
"emptyTable": "No hay información",
"info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
"infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
"infoFiltered": "(Filtrado de _MAX_ total entradas)",
"infoPostFix": "",
"thousands": ",",
"lengthMenu": "Mostrar _MENU_ Entradas",
"loadingRecords": "Cargando...",
"processing": "Procesando...",
"search": "Buscar:",
"zeroRecords": "Sin resultados encontrados",
"paginate": {
"first": "Primero",
"last": "Ultimo",
"next": "Siguiente",
"previous": "Anterior"
}
},
deferRender: true,
"autoWidth": false,
"search": {
"regex": true,
"caseInsensitive": false,
},
});
$("#Date_search").daterangepicker({
"locale": {
"format": "YYYY-MM-DD",
"separator": " to ",
"applyLabel": "Apply",
"cancelLabel": "Cancel",
"fromLabel": "From",
"toLabel": "a",
"customRangeLabel": "Custom",
"weekLabel": "W",
"daysOfWeek": [
"Do",
"Lu",
"Ma",
"Mi",
"Ju",
"Vi",
"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();
});<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<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" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" /> Fecha a buscar: <input id="Date_search" type="text" placeholder="Buscar por fecha" /><br>
<table id='tabla'>
<thead>
<td>Fecha</td>
</thead>
<tbody>
<tr>
<td>2018-05-05</td>
</tr>
<tr>
<td>2018-05-06</td>
</tr>
<tr>
<td>2018-05-07</td>
</tr>
<tr>
<td>2018-05-08</td>
</tr>
<tr>
<td>2018-05-09</td>
</tr>
<tr>
<td>2018-05-10</td>
</tr>
</tbody>
</table>