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>
<link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.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 table-condensed 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...

CSS

html {
  font-size: 12px;
  padding: 0px !important;
}

JavaScript

$(document).ready(function() {

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

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

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

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

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

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

    table.draw();

  });

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

    table.draw();
  });

  $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
    // min and max dates matching
    var dateStart = $('#min').datepicker("getDate") || new Date();
    var dateEnd = $('#max').datepicker("getDate") || new Date();

    var d = data[5].split('/');
    var evalDate = new Date(d[1] + '/' + d[0] + '/' + d[2]);


    var source = $("#postcode").val();
    var radius = $("#radius").val();
    var destination = data[2];

    var calcs = distanceCalc(source, destination);

    if (evalDate >= dateStart && evalDate <= dateEnd || radius == calcs) {
      return true;
    } else {
      return false;
    }



  });

});


function distanceCalc(source, destination) {

    var values = [];
    var directionsService = new google.maps.DirectionsService();
    //*********DIRECTIONS AND ROUTE**********************//
    var request = {
        origin: source,
        destination: destination,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            // directionsDisplay.setDirections(response);
        }
    });
    //*********DISTANCE AND DURATION**********************//
    var service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix({
     ...