jQuery datatable date range search not working

Question

i'm trying to use datatable filter range with input date , i have checking that link range search , it doesn't work for me , below is datatable with dynamic values , i want to make a range search based on date row ( third column). what changes should i make for the code below ?

<script>
     $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min =  $('#start_date').val();
        var max =  $('#end_date').val();
        var date_pursached =  data[2] ) || 0; // use data for the date column
 
        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && age <= max ) ||
             ( min <= date_pursached   && isNaN( max ) ) ||
             ( min <= date_pursached   && date_pursached <= max ) )
        {
            return true;
        }
        return false;
    }
);
 
$(document).ready(function() {
    var table = $('#rapport').DataTable();

     
    // Event listener to the two range filtering inputs to redraw on input
    $('#min, #max').keyup( function() {
        table.draw();
    } );

} );
       
       </script>

<div class="row">
<div class="input-daterange">
		<div class="col-md-4">
		<input type="date" name="start_date"       id="start_date" class="form-control" />
	  </div>
 <div class="col-md-4">
 <input type="date" name="end_date" id="end_date"    class="form-control" />
		</div>      
		</div>
</div>
 <table class="table" id="rapport">
          <thead>
                   <tr>
                      <th>Id</th>
                      <th>Reférence</th>
                      <th>Date</th>
                   </tr>
            </thead>
        <tbody>
              <tr>
                    <td>1</td>
                    <td>XZDF</td>
                    <td>2018-10-26 15:04:13</td>
                   </tr>
               <tr>
                    <td>2</td>
                    <td>XZDpo</td>
                    <td>2018-10-23 15:04:13</td>
               </tr>
               <tr>
                    <td>4</td>
                    <td>XZDmoQSD</td>
                    <td>2018-09-10 15:04:13</td>
               </tr>
     </tbody>
  </table>

Answer 1

Try this...

  $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min =  $('#start_date').val();
        var max =  $('#end_date').val();
        var date_pursached =  data[2]  || 0; // use data for the date column
 
         if (min == "" && max == "") { return true; }
         if (min == "" && date_pursached <= max) { return true;}
         if(max == "" && date_pursached >= min) {return true;}
         if (date_pursached <= max && date_pursached >= min) { return true; }
         return false;
    }
);
 
$(document).ready(function() {
    var table = $('#rapport').DataTable();

     
    // Event listener to the two range filtering inputs to redraw on input
    $('#start_date, #end_date').change( function() {
        table.draw();
    } );

} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>

<div class="row">
<div class="input-daterange">
		<div class="col-md-4">
		<input type="date" name="start_date"       id="start_date" class="form-control" />
	  </div>
 <div class="col-md-4">
 <input type="date" name="end_date" id="end_date"    class="form-control" />
		</div>      
		</div>
</div>
 <table class="table" id="rapport">
          <thead>
                   <tr>
                      <th>Id</th>
                      <th>Reférence</th>
                      <th>Date</th>
                   </tr>
            </thead>
        <tbody>
              <tr>
                    <td>1</td>
                    <td>XZDF</td>
                    <td>2018-10-26 15:04:13</td>
                   </tr>
               <tr>
                    <td>2</td>
                    <td>XZDpo</td>
                    <td>2018-10-23 15:04:13</td>
               </tr>
               <tr>
                    <td>4</td>
                    <td>XZDmoQSD</td>
                    <td>2018-09-10 15:04:13</td>
               </tr>
     </tbody>
  </table>