How do I filter date range in DataTables?
Here is DataTable with Single DatePicker as "from" Date Filter
LiveDemo
Here is DataTable with Two DatePickers for DateRange (To and From) Filter
LiveDemo
Filter datatable with date range
The main issue is your date comparisons
var start = picker.startDate.format('YYYY-MM-DD');
var end = picker.endDate.format('YYYY-MM-DD');
Should be:
var start = picker.startDate;
var end = picker.endDate;
Then you also end up with a problem that your data is getting removed completely out of the search when you filter so you need this after you draw your table
$.fn.dataTable.ext.search.pop();
https://jsfiddle.net/ankepv5v/79/
DataTables date range filter, not getting the first date
It looks like you're setting MinDate and MaxDate once, on document.ready, but not after the user enters dates.
I've moved the code that sets MinDate and MaxDate into your search filter.
Another potential problem is that you're comparing dates in MM-DD-YYYY format as if they are strings, and this won't work when comparing, say, 03-12-2022 with 05-12-2020. The first date is later from a date perspective, but earlier (first) from a string-comparison perspective. So you should probably be converting dates to YYYY-MM-DD format, which works for string comparison.
I'm not sure about this last part because you have new Date(...) (which is standard JS) as well as new DateTime(...) (which I don't think is standard JS) so it's not really clear whether you're comparing strings (e.g. minDate.val()) or objects (e.g. new Date( data[9] )).
var minDate, maxDate;
// Custom filtering function which will search data in column four between two values
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
// Create date inputs
minDate = new DateTime($('#min'), {
format: 'MM-DD-YYYY'
});
maxDate = new DateTime($('#max'), {
format: 'MM-DD-YYYY'
});
var min = minDate.val();
var max = maxDate.val();
var date = new Date( data[9] );
if (
( min === null && max === null ) ||
( min === null && date <= max ) ||
( min <= date && max === null ) ||
( min <= date && date <= max )
) {
return true;
}
return false;
}
);
$(document).ready(function() {
$('#sales').DataTable({
aLengthMenu: [
[25, 50, 100, 200, -1],
[25, 50, 100, 200, "All"]
],
iDisplayLength: -1,
scrollX: true
});
// DataTables initialisation
var table = $('#sales').DataTable();
// Refilter the table
$('#min, #max').on('change', function () {
table.draw();
});
});
Datatables date range filter but, I want to remove the pagination and maybe add or remove some other features
I am confused what the date filter has to do with disabling/enabling certain DataTable options.
The example I have provided comes directly from the DataTables Date range filter. If you look at the different options for info, paging, and ordering, it describes what the boolean values you set them to do.
In the example provided, paging, ordering, and info have been successfully set to false.
var minDate, maxDate;
// Custom filtering function which will search data in column four between two values
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = minDate.val();
var max = maxDate.val();
var date = new Date( data[4] );
if (
( min === null && max === null ) ||
( min === null && date <= max ) ||
( min <= date && max === null ) ||
( min <= date && date <= max )
) {
return true;
}
return false;
}
);
$(document).ready(function() {
// Create date inputs
minDate = new DateTime($('#min'), {
format: 'MMMM Do YYYY'
});
maxDate = new DateTime($('#max'), {
format: 'MMMM Do YYYY'
});
// DataTables initialisation
var table = $('#example').DataTable({
paging: false,
ordering: false,
info: false
});
// Refilter the table
$('#min, #max').on('change', function () {
table.draw();
});
});<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/datetime/1.1.1/css/dataTables.dateTime.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdn.datatables.net/datetime/1.1.1/js/dataTables.dateTime.min.js"></script>
</head>
<body>
<table border="0" cellspacing="5" cellpadding="5">
<tbody><tr>
<td>Minimum date:</td>
<td><input type="text" id="min" name="min"></td>
</tr>
<tr>
<td>Maximum date:</td>
<td><input type="text" id="max" name="max"></td>
</tr>
</tbody></table>
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</body>
</html>DataTables+Datepicker filter table by date range
Your (slightly modified) example with certain added value (timezone independent, limited year range, bounded datepickers):
//Data definitionvar myTableData = [{ "id": "1", "name": "Tiger Nixon", "position": "System Architect", "salary": "$320,800", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" }, { "id": "2", "name": "Garrett Winters", "position": "Accountant", "salary": "$170,750", "start_date": "2011/07/25", "office": "Tokyo", "extn": "8422" }, { "id": "3", "name": "Ashton Cox", "position": "Junior Technical Author", "salary": "$86,000", "start_date": "2009/01/12", "office": "San Francisco", "extn": "1562" }, { "id": "4", "name": "Cedric Kelly", "position": "Senior Javascript Developer", "salary": "$433,060", "start_date": "2012/03/29", "office": "Edinburgh", "extn": "6224" }, { "id": "5", "name": "Airi Satou", "position": "Accountant", "salary": "$162,700", "start_date": "2008/11/28", "office": "Tokyo", "extn": "5407" }, { "id": "6", "name": "Brielle Williamson", "position": "Integration Specialist", "salary": "$372,000", "start_date": "2012/12/02", "office": "New York", "extn": "4804" }, { "id": "7", "name": "Herrod Chandler", "position": "Sales Assistant", "salary": "$137,500", "start_date": "2012/08/06", "office": "San Francisco", "extn": "9608" }];//Global variable for future usevar datepickers = [{ id: 'startdate', coid: 'enddate', value: null, limiter: 'minDate' }, { id: 'enddate', coid: 'startdate', value: null, limiter: 'maxDate' }];//Translate 'yy/mm/dd' string to UTC dateconst yymmddUTC = str => new Date(...str.split('/').map((value,index) => index == 1 ? value-- : value));//DataTables object definitionvar myDataTable = $('#staff').DataTable({ sDom: 't', data: myTableData, columns: [{ title: 'Name', data: 'name' }, { title: 'Position', data: 'position' }, { title: 'Office', data: 'office' }, { title: 'Hire date', data: 'start_date' }, { title: 'Salary', data: 'salary' } ] });//Limit datepicker options to those valid for current datasetvar dates = myDataTable.column(3).data().unique().sort();var minDate = dates[0];var maxDate = dates[dates.length-1];//datepicker objects definition$('.datepicker').datepicker({ dateFormat: 'yy/mm/dd', changeMonth: true, defaultDate: minDate, changeYear: true, yearRange: minDate.substr(0,4)+':'+maxDate.substr(0,4), onSelect: function (selectedDate) { let datepicker = datepickers.find(entry => entry.id == $(this).attr('id')); $(`#${datepicker.coid}`).datepicker('option', datepicker.limiter, selectedDate); datepicker.value = yymmddUTC(selectedDate); myDataTable.draw(); }}).on('change', function(){ datepickers[datepickers.findIndex(item => item.id == $(this).attr('id'))].value = yymmddUTC($(this).val()); myDataTable.draw();});//External search function$.fn.DataTable.ext.search.push((settings, row) => { let rowDate = yymmddUTC(row[3]); return (rowDate >= datepickers[0].value || datepickers[0].value == null) && (rowDate <= datepickers[1].value || datepickers[1].value == null);});<!doctype html><html> <head> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="application/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> </head> <body> <label>Start date:</label> <input id="startdate" class="datepicker"></input> <label>End date:</label> <input id="enddate" class="datepicker"></input> <table id="staff"></table> </body></html>Datatables date range filter
I got mine working base on https://www.data
Related Topics
How to Get the Index from a Json Object With Value
How to Tell Chrome Web Debugger to Show the Current Mouse Position in Page Coordinates
I Want a Code to Fill in the Form Automatically
How to Change Background Opacity When Bootstrap Modal Is Open
Want to Show/Hide Div Based on Dropdown Box Selection
Converting Text to Unicode in JavaScript
Stop Just One Dropdown Toggle from Closing on Click
Print Embedded Pdf from Browser With Javascript, Html5, Angularjs
Launch Chrome Browser from Internet Explorer
How to Make Autoplay of the Swiper Slider Start Only After the Slider Enters Viewport
How to Pass Data from Flask to JavaScript in a Template
Expected Linebreaks to Be 'Lf' But Found 'Crlf' Linebreak-Style
Jest Encountered an Unexpected Token: Syntaxerror: Unexpected Token {
Jquery Get Closest Td Text Value
Javascript Form Submit - Confirm or Cancel Submission Dialog Box
Angular Load Async Data Before Component Initialization