DataTables Date range Selection

by Faisal Khan Janjua

HTML

<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<i id="bFilter"></i>
<span class="topfilters"></span>

<p id="date_filter">
    <span id="date-label-from" class="date-label">From: </span><input class="date_range_filter date" type="text" id="datepicker_from" />
    <span id="date-label-to" class="date-label">To: </span><input class="date_range_filter date" type="text" id="datepicker_to" />
</p>

<div id="parseHere"></div>

    <table width="100%" class="display" id="datatable">
      <thead>
        <tr>
          <th>Date/Time</th>
          <th>Serial</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            03/03/2010 13:02:24
          </td>
          <td>5</td>
        </tr>
        <tr>
          <td>
            03/04/2011 13:02:24
          </td>
          <td>4</td>
        </tr>
        <tr>
          <td>
             03/05/2012 13:02:24
          </td>
          <td>2</td>
        </tr>
        <tr>
          <td>
            03/06/2013 13:02:24
          </td>
          <td>17</td>
        </tr>
        <tr>
          <td>
            03/07/2014 13:02:24
          </td>
          <td>10</td>
        </tr>
        <tr>
          <td>
            03/03/2010 13:02:24
          </td>
          <td>5</td>
        </tr>
        <tr>
          <td>
            03/04/2011 13:02:24
          </td>
          <td>4</td>
        </tr>
        <tr>
          <td>
             03/05/2012 13:02:24
          </td>
          <td>2</td>
        </tr>
        <tr>
          <td>
            03/06/2013 13:02:24
          </td>
          <td>17</td>
        </tr>
        <tr>
          <td>
            03/07/2014 13:02:24
          </td>
   ...

CSS

th, td{
  text-align:center;
}
#bFilter{
  border:1px solid #F99;
  display:none;
}

JavaScript

/*
var obj = JSON.parse('[{"Date/Time":"12/02/2001 13:02:24", "Service":"Other", "Period":"offpeak", "Number":556712374, "Region":"Absheron", "Destination":"Azercell", "Usage":"105 KB", "Change":"1.25 ₼"},{"Date/Time":"13/03/2002 13:02:24", "Service":"Data", "Period":"offpeak", "Number":556712374, "Region":"Absheron", "Destination":"Azercell", "Usage":"105 KB", "Change":"1.25 ₼"},{"Date/Time":"14/04/2003 13:02:24", "Service":"Data", "Period":"offpeak", "Number":556712374, "Region":"Absheron", "Destination":"Azercell", "Usage":"105 KB", "Change":"1.25 ₼"},{"Date/Time":"15/05/2004 13:02:24", "Service":"Call", "Period":"offpeak", "Number":556712374, "Region":"Absheron", "Destination":"Azercell", "Usage":"105 KB", "Change":"1.25 ₼"},{"Date/Time":"16/06/2005 13:02:24", "Service":"SMS", "Period":"offpeak", "Number":556712374, "Region":"Absheron", "Destination":"Azercell", "Usage":"105 KB", "Change":"1.25 ₼"},{"Date/Time":"17/07/2006 13:02:24", "Service":"Voice", "Period":"offpeak", "Number":556712374, "Region":"Absheron", "Destination":"Azercell", "Usage":"105 KB", "Change":"1.25 ₼"},{"Date/Time":"18/08/2007 13:02:24", "Service":"Other", "Period":"offpeak", "Number":556712374, "Region":"Absheron", "Destination":"Azercell", "Usage":"105 KB", "Change":"1.25 ₼"},{"Date/Time":"19/09/2008 13:02:24", "Service":"Data", "Period":"offpeak", "Number":556712374, "Region":"Absheron", "Destination":"Azercell", "Usage":"105 KB", "Change":"1.25 ₼"},{"Date/Time":"20/01/2009 13:02:24", "Service":"SMS", "Period":"offpeak", "Number":556712374, "Region":"Absheron", "Destination":"Azercell", "Usage":"105 KB", "Change":"1.25 ₼"},{"Date/Time":"21/02/2000 13:02:24", "Service":"Call", "Period":"offpeak", "Number":556712374, "Region":"Absheron", "Destination":"Azercell", "Usage":"105 KB", "Change":"1.25 ₼"},{"Date/Time":"22/03/2001 13:02:24", "Service":"Voice", "Period":"offpeak", "Number":556712374, "Region":"Absheron", "Destination":"Azercell", "Usage":"105 KB", "Change":"1.25...