Date Range Filter In Datatable jQuery Example
Websolutionstuff | Nov-14-2022 | Categories : Laravel PHP jQuery
In this article, we will see the date range filter in the datatable jquery example. Many times we required data of a specific duration of the date. So, we will learn client-side date range filter in datatable using jquery. Also, you can create a server-side date range filter in laravel. we will create a filter with a minimum date and maximum date range filter in jquery datatable.
So, let's see the date range filter in datatable laravel 9, how to create a datatable date range filter, and a jquery datatable date range filter.
Example: Datatable Date Range Filter
In this example, we will add datatable CSS and DateTime CSS in <head> tag for the styling table and date picker.
https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css
https://cdn.datatables.net/datetime/1.1.2/css/dataTables.dateTime.min.css
After that, add the following script at bottom of the code.
https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js
https://cdn.datatables.net/datetime/1.1.2/js/dataTables.dateTime.min.js
Now, we will see a full example of the date range in datatable using jquery.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Date Range Filter In Datatable jQuery Example - Websolutionstuff</title>
<link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<link href="https://cdn.datatables.net/datetime/1.1.2/css/dataTables.dateTime.min.css">
</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>
</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>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="https://cdn.datatables.net/datetime/1.1.2/js/dataTables.dateTime.min.js"></script>
<script>
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();
// Refilter the table
$('#min, #max').on('change', function () {
table.draw();
});
});
</script>
Output:
You might also like:
- Read Also: Datatables Localization Example
- Read Also: Laravel 9 Yajra Datatable Example
- Read Also: Laravel 9 Datatables Filter with Dropdown
- Read Also: Dropdown Filter On Specific Column In Datatable
Recommended Post
Featured Post
Laravel-Python Automation Effi...
In this guide, I’ll show you how to use Python scripts to streamline workflows in Laravel by automating repetitive...
Read More
Nov-06-2024
How To Record And Play Audio I...
In this article, we will see how to record and play audio in javascript. Here, we will learn about how to record au...
Read More
Feb-20-2023
Laravel 11 CKEditor Image Uplo...
Hello, laravel web developers! In this article, we'll see how to image upload in CKeditor 5 in laravel 11....
Read More
May-20-2024
How To Create Line Chart In La...
In this article, we will see how to create a line chart in laravel 9 using highcharts. A line chart is a graph...
Read More
Oct-04-2022