JS - Range & State

HTML

<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.10.5/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.10.5/css/jquery.dataTables_themeroller.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.10.5/jquery.dataTables.min.js"></script>
<div class="container">

  <input type="text" id="dateStart" class="datepicker" name="dateStart">
  <input type="text" id="dateEnd" class="datepicker" name="dateEnd">

  <br>
  <br>

  <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Carl</td>
        <td>01/04/2015</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Ivan</td>
        <td>16/12/2016</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>01/01/2017</td>
      </tr>
    </tbody>
  </table>

</div>

JavaScript

// Auxiliar method

function parse(date) {
  var parts = date.split("/");
  return new Date(parts[2], parts[1] - 1, parts[0]);
}

// Add range filter

$.fn.dataTable.ext.search.push(
  function(settings, data, dataIndex) {

    var min = parse($('#dateStart').val());
    var max = parse($('#dateEnd').val());

    var current = parse(data[2]);

    if ((isNaN(min) && isNaN(max)) ||
      (isNaN(min) && current <= max) ||
      (min <= current && isNaN(max)) ||
      (min <= current && current <= max)) {
      return true;
    }

    return false;
  }
);

// Setup table 

var table = $('#example').dataTable({
  "stateSave": true,
  "stateSaveParams": function(settings, data) {  
    data.search.dateStart = $('#dateStart').val();
    data.search.dateEnd = $('#dateEnd').val();
  },
  "stateLoadParams": function(settings, data) {  
    $(document).one("ready", function() {
      $("#dateStart").datepicker("setDate", data.search.dateStart);
      $("#dateEnd").datepicker("setDate", data.search.dateEnd);
      table.fnDraw();
    });
  }
});

// Setup pickers

$('#dateStart').datepicker({
  dateFormat: 'dd/mm/yy',
  onClose: function() {
    table.fnDraw();
  }
});

$('#dateEnd').datepicker({
  dateFormat: 'dd/mm/yy',
  onClose: function() {
    table.fnDraw();
  }
});

$(document).trigger("ready");