jQuery addClass example

Change class name on click in jQuery

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="filter-item">
        <span class="lbl">From:</span>
        <div class='input-group date' id="from_date_picker">
            <input type='text' class="form-control"/>
            <span class="input-group-addon">
              <span class="fa fa-calendar"></span>
            </span>
        </div>
      </div>
      <div class="filter-item">
        <span class="lbl">To:</span>
        <div class='input-group date' id='to_date_picker'>
            <input type='text' class="form-control"/>
            <span class="input-group-addon">
              <span class="fa fa-calendar"></span>
            </span>
        </div>
      </div>
<div class="data-table">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>CONTRACT NAME</th>
          <th>TYPE</th>
          <th>STATUS</th>
          <th class="filter-start-date">START DATE</th>
          <th class="filter-end-date">END DATE</th>
          <th class="sort-false">ACTIONS</th>
        </tr>
      </thead>
      <tbody>
      <tr>
      <td>test 1</td>
      <td>test 1</td>
      <td>test 1</td>
      <td>test 1</td>
      <td>02/02/2019</td>
      <td>02/20/2019</td>
      <td>test 1</td>
      </tr>
      </tbody>
    </table>
  </div>

JavaScript

$(document).ready(function(){

$('table').DataTable({
    dom: 'Bfrtip',
    info: false,
      "columnDefs": [
  ],
    paging: false,
  });
  
  
  $(function () {
      $('#from_date_picker').datetimepicker({
          format: 'L',
      });
      $('#to_date_picker').datetimepicker({
          format: 'L',
      });
  });
  
  var oTable = $('.data-table table').dataTable();
     
  $("#from_date_picker").on("dp.change", function (e) {
    oTable.fnDraw();
  });
  
  $("#to_date_picker").on("dp.change", function (e) {
    oTable.fnDraw();
  });
  
});

$.fn.dataTableExt.afnFiltering.push(
	function( oSettings, aData, iDataIndex ) {
		var iFini = $('#from_date_picker input').val();
		var iFfin = $('#to_date_picker input').val();
		var iStartDateCol = $('table').DataTable().column('.filter-start-date').index()
		var iEndDateCol = $('table').DataTable().column('.filter-end-date').index()
      
		iFini=iFini.substring(6,10) + iFini.substring(3,5)+ iFini.substring(0,2);
		iFfin=iFfin.substring(6,10) + iFfin.substring(3,5)+ iFfin.substring(0,2);

		var datofini=aData[iStartDateCol].substring(6,10) + aData[iStartDateCol].substring(3,5)+ aData[iStartDateCol].substring(0,2);
		var datoffin=aData[iEndDateCol].substring(6,10) + aData[iEndDateCol].substring(3,5)+ aData[iEndDateCol].substring(0,2);

		if ( iFini === "" && iFfin === "" )
		{
			return true;
		}
		else if ( iFini <= datofini && iFfin === "")
		{
			return true;
		}
		else if ( iFfin >= datoffin && iFini === "")
		{
			return true;
		}
		else if (iFini <= datofini && iFfin >= datoffin)
		{
			return true;
		}
		return false;
	}
);