Answered by:
Jquery DataTable

Question
-
User-797751191 posted
Hi
In Jquery Datatable can we search records using Date Range like 01/07/2019..31/07/2019. or we can give only single date
Thanks
Sunday, July 21, 2019 10:43 AM
Answers
-
User288213138 posted
Hi jsshivalik,
According to your description, here is a demo for your reference.
Use the Datepicker plug-in to get the range of dates you want to filter, And then we sift through the data, and finally listen to the two range filtering inputs to redraw on input.
The code:
<script src="../Scripts/jquery-3.3.1.min.js"></script> <script src="../Test Code5/NewFolder1/jquery-ui.js"></script> <link href="NewFolder1/jquery-ui.css" rel="stylesheet" /> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" /> <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> <script> $(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[4]); 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({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true }); $("#max").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true }); var table = $('#example').DataTable(); // Event listener to the two range filtering inputs to redraw on input $('#min, #max').change(function () { table.draw(); }); }); </script> <table border="0" cellspacing="5" cellpadding="5"> <tbody> <tr> <td>Minimum Date:</td> <td><input name="min" id="min" type="text"></td> </tr> <tr> <td>Maximum Date:</td> <td><input name="max" id="max" type="text"></td> </tr> </tbody> </table> <table class="display" id="example" cellspacing="0"> <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>2019/07/01</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2019/07/02</td> <td>$170,750</td> </tr> <tr> <td>Sonya Frost</td> <td>Software Engineer</td> <td>Edinburgh</td> <td>23</td> <td>2019/07/03</td> <td>$103,600</td> </tr> <tr> <td>Jena Gaines</td> <td>Office Manager</td> <td>London</td> <td>30</td> <td>2019/07/04</td> <td>$90,560</td> </tr> </tbody> </table>
The result:
Best regards,
Sam
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, July 22, 2019 8:17 AM
All replies
-
User288213138 posted
Hi jsshivalik,
According to your description, here is a demo for your reference.
Use the Datepicker plug-in to get the range of dates you want to filter, And then we sift through the data, and finally listen to the two range filtering inputs to redraw on input.
The code:
<script src="../Scripts/jquery-3.3.1.min.js"></script> <script src="../Test Code5/NewFolder1/jquery-ui.js"></script> <link href="NewFolder1/jquery-ui.css" rel="stylesheet" /> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" /> <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> <script> $(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[4]); 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({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true }); $("#max").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true }); var table = $('#example').DataTable(); // Event listener to the two range filtering inputs to redraw on input $('#min, #max').change(function () { table.draw(); }); }); </script> <table border="0" cellspacing="5" cellpadding="5"> <tbody> <tr> <td>Minimum Date:</td> <td><input name="min" id="min" type="text"></td> </tr> <tr> <td>Maximum Date:</td> <td><input name="max" id="max" type="text"></td> </tr> </tbody> </table> <table class="display" id="example" cellspacing="0"> <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>2019/07/01</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2019/07/02</td> <td>$170,750</td> </tr> <tr> <td>Sonya Frost</td> <td>Software Engineer</td> <td>Edinburgh</td> <td>23</td> <td>2019/07/03</td> <td>$103,600</td> </tr> <tr> <td>Jena Gaines</td> <td>Office Manager</td> <td>London</td> <td>30</td> <td>2019/07/04</td> <td>$90,560</td> </tr> </tbody> </table>
The result:
Best regards,
Sam
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, July 22, 2019 8:17 AM -
User-797751191 posted
Hi Samwu
I wanted is it possible thru Existing Search option
Thanks
Monday, July 22, 2019 10:39 AM -
User475983607 posted
jsshivalik
I wanted is it possible thru Existing Search optionWhat is the "Existing Search option"? Do yo mean without configuring DataTable? If so, no. It is up to you - the programming - to configure DataTable.
This post like your others appears you are not reading the reference documentation and expect some kind of magical solution that matches your expectation. Please read the documentation and post your code if you need help.
Monday, July 22, 2019 11:05 AM -
User-2054057000 posted
Hi Samwu
I wanted is it possible thru Existing Search option
Thanks
The above answer posted is already using the existing search option. You cannot customize the datatables any further in this regard.
Monday, July 22, 2019 12:04 PM