DataTables date range filter

 <div class="date-filter12">

                <div class="row">

                    <div class="col-md-12">

                        <h4 class="text text-primary">Search By Date:</h4>

                    </div>

                    <div class="col-md-2">

                        <label>From Date:</label>

                        <input type="text" id="min" name="min" class="form-control">

                    </div>

                    <div class="col-md-2">

                        <label>To Date:</label>

                        <input type="text" id="max" name="max" class="form-control">

                    </div>

                </div>

            </div>

Data Table start here : id is very important check id okay

                    <table id="example" class="display" style="width:100%">

                        <thead class="table-light">

                          <tr>

                             <th>Referenc#</th>

                             <th>Pick Date</th>

                             <th>Origin</th>

                             <th>Drop</th>

                             <th>Truck</th>

                             <th>Load Type</th>

                             <th>Broker</th>

                             <th>Status</th>

                             <th>Date</th>

                             <th>Action</th>

                          </tr>

                        </thead>

                        <tbody id="lodetypeerStatus">

                        @php $i=1;

                        @endphp

                            @foreach($userdata as $loads_data)

                                <?php

                                    // $shipment_res = App\Models\Load::where('user_id',$loads_data['user_id'])->orderBy('id','desc')->get();

                                    //  dd($shipment_res);

                                    $shipment_res = App\Models\Load::where([['user_id',$loads_data['user_id']],['load_status', '=', '0'] ])->orderBy('id','desc')->get();

                                ?>

                                @foreach($shipment_res as $user_load)

                                    <tr class="odd">

                                        <td class="copy-text">{{ $user_load->ref_no }}</td>

                                        <td class="copy-text">{{ $user_load->post_date }}</td>

                                        <td class="copy-text">{{ $user_load->load_state_origin }}</td>

                                        <td class="copy-text">{{ $user_load->load_city_desti }}</td>

                                        <td class="copy-text">{{ $user_load->equipments }}</td>

                                        <td class="copy-text">{{ $user_load->full_partial_tl_ltl }}</td>

                                            @php

                                                $user =  App\Models\User::where('id',$user_load['user_id'])->first();

                                                $name= isset($user['name']) ? $user['name'] : null;

                                            @endphp

                                        <td>{{ucfirst($name)}}</td>

                                            <?php

                                                $status= $user_load->load_status;

                                                $date_pick= explode("T",$user_load->dat_pick_date);

                                                $date_pick1= strtotime($date_pick['0']);

                                                $today= strtotime(date('Y-m-d'));

                                                $lstatus= '';

                                                if($today > $date_pick1){

                                                    $lstatus = 'Expire';

                                                }else{

                                                    if($status == 1){

                                                            $lstatus = 'Delete';

                                                    }else{

                                                        $lstatus = 'Active';

                                                    }

                                                }

                                            ?>

                                        <td>{{ $lstatus }}</td>

                                        <!--<td>{{ date('d M, Y', strtotime($user_load->created_at) )}}</td>-->

                                        {{-- <td>{{ date('Y-m-d', strtotime($user_load->created_at) )}}</td> --}}

                                        <td>{{ date('m/d/Y', strtotime($user_load->created_at) )}}</td>

                                        <td style="width: 80px;" class="action_tooltip classToInclude"  >

                                            <input type="hidden" value="{{ $user_load->load_dat_id }}" id="load_dat_id">

                                           

                                            <button type="button" class="btn btn-outline-secondary btn-sm radius-30 px-4" id="load_update_form_btn"><i class="bx bx-edit"></i><span class="tooltip">Edit</span></button>

                                           

                                           

                                            <button type="button" class="btn btn-outline-danger btn-sm radius-30 px-4" id="load_delete_btn" ><i class="bx bx-trash"></i><span class="tooltip">Delete</span></button>

                                           

                                           

                                           

                                           

                                        </td>

                                    </tr>

                           

                                @endforeach

                            @endforeach

                        </tbody>

                        <tfoot>

                            <tr>

                                <th>Referenc#</th>

                                <th>Pick Date</th>

                                <th>Origin</th>

                                <th>Drop</th>

                                <th>Truck</th>

                                <th>Load Type</th>

                                <th>Broker</th>

                                <th>Status</th>

                                <th>Date</th>

                                <th>Action</th>

                             </tr>

                        </tfoot>

                    </table>

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.3/css/jquery.dataTables.min.css">

<link rel="stylesheet" href="https://cdn.datatables.net/datetime/1.3.1/css/dataTables.dateTime.min.css">

 <script>

Note: *** 8 is number of date column 0 to 8 means 9 number column.

var startDate = new Date(data[8]);

endnote

    $(document).ready(function () {

            $.fn.dataTable.ext.search.push(

                function (settings, data, dataIndex) {

                    var min = $('#min').datepicker('getDate');

                    var max = $('#max').datepicker('getDate');

                    var startDate = new Date(data[8]);

                    if (min == null && max == null) return true;

                    if (min == null && startDate <= max) return true;

                    if (max == null && startDate >= min) return true;

                    if (startDate <= max && startDate >= min) return true;

                    return false;

                }

            );

       

            $('#min').datepicker();

            $('#max').datepicker();

            var table = $('#example').DataTable();

       

            // Event listener to the two range filtering inputs to redraw on input

            $('#min, #max').change(function () {

                table.draw();

            });

        });

</script>