datatable head creation using 2 datepickers

by Umesh Patil

HTML

<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<table id="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>
      <td style="padding: 10px !important"> <button  id="filter">
      search
      </button></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>
     ...

JavaScript

$(document).ready(function() {

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

	var $tableSel = $('#transport-search');
  $tableSel.dataTable();
  $('#filter').on('click', function(e){
    e.preventDefault();
    var startDate = $('#min').val(),
        endDate = $('#max').val();
    
    filterByDate(1, startDate, endDate); // We call our filter function
    
    $tableSel.dataTable().fnDraw(); // Manually redraw the table after filtering
  });
  var filterByDate = function(column, startDate, endDate) {
  // Custom filter syntax requires pushing the new filter to the global filter array
		$.fn.dataTableExt.afnFiltering.push(
		   	function( oSettings, aData, iDataIndex ) {
		   		var rowDate = normalizeDate(aData[column]),
              start = normalizeDate(startDate),
              end = normalizeDate(endDate);
          
          // If our date from the row is between the start and end
          if (start <= rowDate && rowDate <= end) {
            return true;
          } else if (rowDate >= start && end === '' && start !== ''){
            return true;
          } else if (rowDate <= end && start === '' && end !== ''){
            return true;
          } else {
            return false;
          }
        }
		);
	};
  var normalizeDate = function(dateString) {
  var date = new Date(dateString);
  var normalized = date.getFullYear() + '' + (("0" + (date.getMonth() + 1)).slice(-2)) + '' + ("0" + date.getDate()).slice(-2);
  return normalized;
}

});