Jquery datatable with date range search

html and php code
----------------------
<input type="text" id="mindate"/>
<input type="text" id="maxdate"/>

            <table id="example" class="display table table-striped table-bordered " cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Owner ID</th>
                        <th>Type</th>
                        <th>State</th>
                        <th>City</th>
                        <th>Locality</th>
                        <th>Min Price</th>
                        <th>Max Price</th>
                        <th>Created Date</th>
                        <th>Actions</th>

                    </tr>
                </thead>
                <tfoot>
                    <tr>
                           <th>Owner ID</th>
                        <th>Type</th>
                        <th>State</th>
                        <th>City</th>
                        <th>Locality</th>
                        <th>Min Price</th>
                        <th>Max Price</th>
                        <th>Created Date</th>
                        <th>Actions</th>
                    </tr>
                </tfoot>
                <tbody>
                           
                    <?php if($projectsdate){ foreach($projectsdate as $pjdata)
                    {  $date = $pjdata['created']; ?>
                 
                    <tr>
                        <td><?php echo $pjdata['ownerid'] ?></td>
                        <td><?php echo $pjdata['propertytype'] ?></td>
                        <td><?php echo $pjdata['States']['statename']?></td>
                        <td><?php echo $pjdata['Cities']['cityname'] ?></td>
                        <td><?php echo $pjdata['locality'] ?></td>
                        <td><?php echo $pjdata['minprice'] ?></td>
                        <td><?php echo $pjdata['maxprice'] ?></td>
                        <td><?php  if($date){ echo date_format($date,"d-m-Y"); } ?></td>
                        <td>Approve</td>
                    </tr>
                         
                    <?php }} ?>
                 
       
                </tbody>
            </table>

Jquery code
-----------------
<script>
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var iFini = document.getElementById('mindate').value;
var iFfin = document.getElementById('maxdate').value;
var iStartDateCol = 7;
var iEndDateCol = 7;

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;
}
);
          $(document).ready(function () {
                $('.datepicker').datepicker({
                    format: "dd-mm-yyyy"
                });
         
            });
         
$(document).ready(function() {
    var table = $('#example').DataTable();
    var table2 = $('#example').DataTable();

        // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" class="footer" placeholder="Search '+title+'" />' );
    } );
    // Apply the search
    table.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
 

} );

</script>