Pages

09 January, 2023

DataTables date range filter

DataTables date range filter


** Only Change ID Name  = "carrier_table"


user in Script Tag 

 $(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[7]);

                    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 = $('#carrier_table').DataTable();

        

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

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

                table.draw();

            });

        });



For = HTML

<div class="row date-filter">

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

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

                                </div>

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

                                    <label>From Date:</label>

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

                                </div>

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

                                    <label>To Date:</label>

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

                                </div>

                            </div>

No comments:

Post a Comment

Thanks