title: DataTables+Datepicker filter table by date range
body: <p>Trying to implement DataTables filter by date range using two bounded datepickers. </p>
  
  <p>I've seen few similar questions at SO, but none of those having answers worked for me.</p>
  
  <p>So far, I managed to implement interface elements, but have no idea as of how to put them together to proceed further. Any help is appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var myTableData = 
    [
      {
        "id": "1",
        "name": "Tiger Nixon",
        "position": "System Architect",
        "salary": "$320,800",
        "start_date": "2011/04/25",
        "office": "Edinburgh",
        "extn": "5421"
      },
      {
        "id": "2",
        "name": "Garrett Winters",
        "position": "Accountant",
        "salary": "$170,750",
        "start_date": "2011/07/25",
        "office": "Tokyo",
        "extn": "8422"
      },
      {
        "id": "3",
        "name": "Ashton Cox",
        "position": "Junior Technical Author",
        "salary": "$86,000",
        "start_date": "2009/01/12",
        "office": "San Francisco",
        "extn": "1562"
      },
      {
        "id": "4",
        "name": "Cedric Kelly",
        "position": "Senior Javascript Developer",
        "salary": "$433,060",
        "start_date": "2012/03/29",
        "office": "Edinburgh",
        "extn": "6224"
      },
      {
        "id": "5",
        "name": "Airi Satou",
        "position": "Accountant",
        "salary": "$162,700",
        "start_date": "2008/11/28",
        "office": "Tokyo",
        "extn": "5407"
      },
      {
        "id": "6",
        "name": "Brielle Williamson",
        "position": "Integration Specialist",
        "salary": "$372,000",
        "start_date": "2012/12/02",
        "office": "New York",
        "extn": "4804"
      },
      {
        "id": "7",
        "name": "Herrod Chandler",
        "position": "Sales Assistant",
        "salary": "$137,500",
        "start_date": "2012/08/06",
        "office": "San Francisco",
        "extn": "9608"
      }
  ];
  
  $('.datepicker').datepicker();
  
  var myDataTable = $('#staff').DataTable({
    sDom: 't',
    data: myTableData,
    columns: [
      {title: 'Name', data: 'name'},
      {title: 'Position', data: 'position'},
      {title: 'Office', data: 'office'},
      {title: 'Hire date', data: 'start_date'},
      {title: 'Salary', data: 'salary'}
    ]
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
      &lt;script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="application/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;label&gt;Start date:&lt;/label&gt;
      &lt;input id="startdate" class="datepicker"&gt;&lt;/input&gt;
      &lt;label&gt;End date:&lt;/label&gt;
      &lt;input id="enddate" class="datepicker"&gt;&lt;/input&gt;
      &lt;button id="filter"&gt;Filter&lt;/button&gt;
      &lt;table id="staff"&gt;&lt;/table&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>