JSFiddle - React, Tailwind, and code Playground

by Harshitha Naidu

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<table class="transport-search">
  <tbody>
    <tr>
      <td style="padding: 10px !important"><input name="min" id="min" type="text" class="form-control date" placeholder="Min Date"></td>

      <td style="padding: 10px !important"> <input name="max" id="max" type="text" class="form-control date" placeholder="Max Date"></td>

      <td style="padding: 10px !important"> <input type="text" class="form-control" id="radius" placeholder="Radius"></td>

      <td style="padding: 10px !important"> <input type="text" class="form-control" id="postcode" placeholder="Address/Postcode"></td>

    </tr>
  </tbody>
</table>
<table class="table-striped table table-bordered transport">
  <thead>
    <tr role="row">
      <th width="4%">JobID</th>
      <th width="8%">Customer</th>
      <th width="11%">Site</th>
      <th width="8%">Site Contact</th>
      <th width="8%">Direction</th>
      <th width="8%">Dates</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td style="text-align: center;vertical-align: middle;">
        <p class="no-margins"> CN52
        </p>
      </td>
      <td class="sorting_1">
        <p class="no-margins">1281 </p>
        <p class="no-margins">BDS Yorkshire Limited</p>
      </td>
      <td>
        <p class="no-margins"> Hilderthorpe Road </p>
        <p class="no-margins"> </p>
        <p class="no-margins"> </p>
        <p class="no-margins">Bridlington </p>
        <p class="no-margins"> East Yorkshire </p>
        <p class="no-margins"> YO15 3AZ </p>
      </td>
      <td>
        <p class="no-margins">Jane Mason </p>
        <p class="no-margins">[email protected] </p>
        <p class="no-margins">01377 240403 </p>
      </td>
      <td>Collection</td>
      <td>
        02/02/2018
      </td>
    </tr>
    <tr role="row" class="even">
  ...

JavaScript

$(document).ready(function() {

  $('input.date').datepicker({
    format: "dd/mm/yyyy",
		changeMonth: true,
		changeYear: true,
    autoclose: true
  });

  var table = $('.transport').DataTable();

  // Event listener to the two range filtering inputs to redraw on input
  $("#min").datepicker({
    onSelect: function() {
      table.draw();
    }
  });

  $("#max").datepicker({
    onSelect: function() {
      table.draw();
    }
  });

  $('#min, #max').on('keyup', function() {

    var dateStart = $('#min').datepicker("getDate");
    var dateEnd = $('#max').datepicker("getDate");
    var evalDate = new Date(data[5]);

    if (evalDate >= dateStart && evalDate <= dateEnd) {
      table
        .column(6)
        .search(dateStart)
        .draw();
    } else {
      return false;
    }

  });

  $('#postcode, #radius').on('keyup', function() {

    table
      .column(2)
      .search(this.value)
      .draw();

  });
	
	

});