CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other

10 March, 2023

DataTables date range filter

 Programing Coderfunda     March 10, 2023     Jquery, php     No comments   

 <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>
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Sitaare Zameen Par Full Movie Review
     Here’s a  complete Vue.js tutorial for beginners to master level , structured in a progressive and simple way. It covers all essential topi...
  • Credit card validation in laravel
      Validation rules for credit card using laravel-validation-rules/credit-card package in laravel Install package laravel-validation-rules/cr...
  • AI foot tracking model
    I am a student doing a graduation project. I urgently need to deal with this model (I am attaching a link). I've never worked with pytho...
  • Write API Integrations in Laravel and PHP Projects with Saloon
    Write API Integrations in Laravel and PHP Projects with Saloon Saloon  is a Laravel/PHP package that allows you to write your API integratio...
  • iOS 17 Force Screen Rotation not working on iPAD only
    I have followed all the links on Google and StackOverFlow, unfortunately, I could not find any reliable solution Specifically for iPad devic...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (69)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • July (4)
  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

Loading...

Laravel News

Loading...

Copyright © CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda