filter datatable by date range

Question

filter datatable by date range

Navigation

#1 by (3 votes)

2

I have this datatable:

$(document).ready(function() {
  $("#Date_search").val("");
});

var table = $('#tabla').DataTable( {
  deferRender:    true, 
  "autoWidth": false,     
  "search": {
    "regex": true,
    "caseInsensitive": false,
  },});

$('#Date_search').on( 'keyup change', function () {
  table.draw();
});

$.fn.dataTable.ext.search.push(
  function( settings, data, dataIndex ) {
    var min = $("#Date_search").val().split(" to ")[0];
    var max = $("#Date_search").val().split(" to ")[1];
    var date = data[2] || ""; // use data for the date column
    if ( ( isNaN( min ) && isNaN( max ) ) ||
        ( isNaN( min ) && date <= max ) ||
        ( min <= date   && isNaN( max ) ) ||
        ( min <= date   && date <= max ) )
    {
      return true;
    }
    return false;
  }
);

$("#Date_search").daterangepicker({
  "locale": {
    "format": "YYYY-MM-DD",
    "separator": " to ",
    "applyLabel": "Apply",
    "cancelLabel": "Cancel",
    "fromLabel": "From",
    "toLabel": "To",
    "customRangeLabel": "Custom",
    "weekLabel": "W",
    "daysOfWeek": [
      "Su",
      "Mo",
      "Tu",
      "We",
      "Th",
      "Fr",
      "Sa"
    ],
    "monthNames": [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ],
    "firstDay": 1
  },
  "opens": "center",
});

<html>
  <head>
    <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">
  </head>
  <body>
    Date: <input id="Date_search" type="text" placeholder="Search by Date" /><br>        
    <table id='tabla'>
      <thead>
        <td>Date</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>
  </body>
</html>

And I can not get it to filter me correctly by the dates.

I followed the DataTable documentation to filter a range of dates and I can not find what is failing me.

I've searched Stackoverflow and the Internet and I can not find any solution to my problem.

Any ideas to make it work?

Thanks

(In case you have to mess around: link )

javascript datatables date datepicker

asked by XBoss 03.08.2018 в 10:53

source

1 answer

Discriminate data according to two attributes Why do you round my decimals? Problem with two-dimensional arrangement C

score 3 · Accepted Answer

I have changed your code to filter by dates:

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( {
  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": "To",
    "customRangeLabel": "Custom",
    "weekLabel": "W",
    "daysOfWeek": [
      "Su",
      "Mo",
      "Tu",
      "We",
      "Th",
      "Fr",
      "Sa"
    ],
    "monthNames": [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ],
    "firstDay": 1
  },
  "opens": "center",
}, function(start, end, label) {
  maxDateFilter = end;
  minDateFilter = start;
  table.draw();  
});

What I have done has been to add the filtering function by dates to datatables, and then in the callback of the daterangepicker store the start and end dates in the global variables.

This I found in this answer And you have the example here