jQuery DataTables, getting it to work with date range picker

Question

I've got a jQuery DataTable and I've got my dates in the second column in MM-DD-YYYY format. I'm trying to get my date range picker to work with it, so my datatable only shows rows with dates within the range in the picker.

Table and date range picker:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>


<div class="col-md-8">
                            <div class="input-group input-daterange">
                                <input type="text" class="form-control date-range-filter" placeholder="Date Start" data-date-format="mm-dd-yyyy" id="min" />
                                <span class="input-group-addon">to</span>
                                <input type="text" class="form-control date-range-filter" placeholder="Date End" data-date-format="mm-dd-yyyy" id="max"/>
                            </div>
                        </div>




<div class="panel-body">
                <table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Date</th>
                            <th>Time</th>
                            <th></th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="odd gradeX">
                            <td>Name</td>
                            <td>06/06/2017</td>
                            <td>6:31:43 PM</td>
                            <td>CDT</td>
                            <td>All Systems Normal</td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Name</td>
                            <td>06/05/2017</td>
                            <td>1:22:33 PM</td>
                            <td>CDT</td>
                            <td><font color="red"> LOW Voltage</font></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Name</td>
                            <td>06/04/2017</td>
                            <td>6:11:25 AM</td>
                            <td>CDT</td>
                            <td><font color="red">Main Power Failure</font></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Name</td>
                            <td>06/03/2017</td>
                            <td>5:31:43 PM</td>
                            <td>CDT</td>
                            <td><font color="red">Main Power Failure <br> LOW DC Voltage</font></td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Name</td>
                            <td>06/02/2017</td>
                            <td>2:20:43 PM</td>
                            <td>CDT</td>
                            <td>All Systems Normal</td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Name</td>
                            <td>06/01/2017</td>
                            <td>3:50:21 AM</td>
                            <td>CDT</td>
                            <td><font color="red">Digital Input 1</font></td>
                        </tr>

                    </tbody>
                </table>
            </div>

I've tried this code, and I can't seem to get it to work. What am I missing?

// Bootstrap datepicker
$('.input-daterange input').each(function() {
  $(this).datepicker('clearDates');
});

// Extend dataTables search
$.fn.dataTable.ext.search.push(
  function(settings, data, dataIndex) {
    var min = $('#min').val();
    var max = $('#max').val();
    var createdAt = data[1] || 1; // Our date column in the table

    if (
      (min == "" || max == "") ||
      (moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max))
    ) {
      return true;
    }
    return false;
  }
);

// Re-draw the table when the a date range filter changes
$('.date-range-filter').change(function() {
    var table = $('#data-table').DataTable();
  table.draw();
});

$('#data-table_filter').hide();

Still not really too sure why this isnt working on my page.

J. Doe43
– J. Doe43

2017-10-31 22:50:04 +00:00
Commented Oct 31, 2017 at 22:50 — J. Doe43
– J. Doe43, Commented Oct 31, 2017 at 22:50

Poultry in Motion · Accepted Answer · 2017-08-01 17:06:16Z

2

Seems to work like a champ for me! Have a look at my jsFiddle of your code. Note that I added a few additional plugins from what you had in your example, and that I handled everything you'd written inside of a document.ready call.

https://jsfiddle.net/zy914ko6/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"/>


<script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script>
$(document).ready(function() {
// Bootstrap datepicker
$('.input-daterange input').each(function() {
  $(this).datepicker('clearDates');
});

// Extend dataTables search
$.fn.dataTable.ext.search.push(
  function(settings, data, dataIndex) {
    var min = $('#min').val();
    var max = $('#max').val();
    var createdAt = data[1] || 1; // Our date column in the table

    if (
      (min == "" || max == "") ||
      (moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max))
    ) {
      return true;
    }
    return false;
  }
);

// Re-draw the table when the a date range filter changes
$('.date-range-filter').change(function() {
    var table = $('#data-table').DataTable();
  table.draw();
});


$('.date-range-filter').datepicker();
});
</script>

answered Aug 1, 2017 at 17:06

Poultry in Motion

1191 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

J. Doe43 Over a year ago

Hmmm, I see it working in the jsFiddle just fine! I noticed I'm getting this error in my website though "Uncaught TypeError: Cannot read property 'apply' of undefined at HTMLInputElement.<anonymous> (jquery-ui.min.js:9) at Function.each (jquery-1.12.4.min.js:2) at e.fn.init.each (jquery-1.12.4.min.js:2) at e.fn.init.t.fn.datepicker (jquery-ui.min.js:9)" When I look that error up, the common fix is adding a document.ready call. Which I have implemented into my code D:

Poultry in Motion Over a year ago

Great! If you'll mark my answer as the solution, I'd greatly appreciate it. Happy to help!

J. Doe43 Over a year ago

Thanks for the confirmation my code is mostly correct, although Im not sure how to fix this error I'm getting.

Poultry in Motion Over a year ago

Make sure you note the includes that I have in my jsFiddle (on the left-hand side of the UI). Given your original code, I had to add a few different includes to get it working. Your code may have originated from a code sample somewhere that assumes those includes are already in place. Best of luck with it!

J. Doe43 Over a year ago

Oh yeah, I did. I even got rid of all of my includes temporarily and pasted all of the ones you used, and yet it still wasn't working for me.

|

Collectives™ on Stack Overflow

jQuery DataTables, getting it to work with date range picker

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related