JSFiddle - React, Tailwind, and code Playground

by Muhammad Mushtaq Sheikh

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
   
  </head>

  <body>
<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" />
    
</p>
    <table width="100%" class="display" id="datatable">
      <thead>
        <tr>
          <th>Col1</th>
          <th>Col2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            03/03/2017
          </td>
          <td>5</td>
        </tr>
        <tr>
          <td>
            03/04/2017
          </td>
          <td>4</td>
        </tr>
        <tr>
          <td>
             03/05/2016
          </td>
          <td>2</td>
        </tr>
        <tr>
          <td>
            03/06/2016
          </td>
          <td>17</td>
        </tr>
        <tr>
          <td>
            03/07/2017
          </td>
          <td>10</td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

CSS

/* Put your css in here */

h1 {
  color: red;
}

JavaScript

$(function() {
  var oTable = $('#datatable').DataTable({
    "oLanguage": {
      "sSearch": "Filter Data"
    },
    "iDisplayLength": -1,
    "sPaginationType": "full_numbers",

  });




  $("#datepicker_from").datepicker({
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: false,
    "onSelect": function(date) {
      minDateFilter = new Date(date).getTime();
      oTable.fnDraw();
    }
  }).keyup(function() {
    minDateFilter = new Date(this.value).getTime();
    oTable.fnDraw();
  });

  

});

// Date range filter
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;
      }
    }

    

    return true;
  }
);