JSFiddle - React, Tailwind, and code Playground

by cjedgerton

HTML

<script src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.15/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.15/datatables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<div class="container">
  <div class="col-md-4 pull-right">
    <div class="input-group input-daterange">

      <input type="text" id="min-date" class="form-control date-range-filter" data-date-format="yyyy-mm-dd" placeholder="From:">

      <div class="input-group-addon">to</div>

      <input type="text" id="max-date" class="form-control date-range-filter" data-date-format="yyyy-mm-dd" placeholder="To:">

    </div>
  </div>
</div>

<table id="my-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Created At</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <th>Bob</th>
      <th>2017-04-20</th>
    </tr>
    <tr>
      <th>2</th>
      <th>Jane</th>
      <th>2017-02-15</th>
    </tr>
    <tr>
      <th>3</th>
      <th>Jill</th>
      <th>2015-02-15</th>
    </tr>
    <tr>
      <th>4</th>
      <th>Joe</th>
      <th>2016-08-06</th>
    </tr>
  </tbody>
</table>

JavaScript

// Bootstrap datepicker
$('.input-daterange input').each(function() {
  $(this).datepicker('clearDates');
});

// Set up your table
table = $('#my-table').DataTable({
  paging: false,
  info: false
});

// Extend dataTables search
$.fn.dataTable.ext.search.push(
  function(settings, data, dataIndex) {
    var min = $('#min-date').val();
    var max = $('#max-date').val();
    var createdAt = data[2] || 0; // Our date column in the table

    if (
      (min == "" || max == "") ||
      (moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max))
    ) {
      return true;
    }
    return false;
  }
);

// Re-draw the table when the a date range filter changes
$('.date-range-filter').change(function() {
  table.draw();
});

$('#my-table_filter').hide();