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

  • Crawl and Index Your Website with Laravel Site Search
      Laravel Site Search   is a package by Spatie to create a full-text search index by crawling your site. You can think of it as a private Go...
  • JqueryUI - Show
    JqueryUI - Show, JqueryUI,  This chapter will discuss the show() method, which is one of the methods used to manage jQueryUI visual effe...
  • WordPress Table
    WordPress Table WordPress table is an easy way to show the data in the table format. In the past, we had used the HTML code or table plugin ...
  • Multipart file is not present in SB3
    Since the update on Spring Boot 3, my multipart endpoint has stopped working. I tried every post on the stackOverflow but it was not helping...
  • Vue.js Routing
      Vue.js Routing Vue.js does not have a built-in router feature, but you can easily create a single page application that supports routing...

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