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
  });

  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");
    var dateEnd = $('#max').datepicker("getDate");
    var evalDate = new Date(data[5]);

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

    var source = $("#postcode").val();
    var radius = $("#radius").val();

    table.columns().eq(2).each(function(index) {
      var column = table.column(index);

      var destination = column.data();

      distanceCalc(source, destination).then(calcs => {

        if (radius == calcs) {
          return true;
        } else {
          return false;
        }

      }).catch(err => {
        return false;
      })

    });



  });

});

function distanceCalc(source, destination) {
  return new Promise((resolve, reject) => {
    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...