NOTE!
- In v2.24.6, added a new date range parser which uses this format: "dd MMMM yyyy"; added to the last column.
- Added v2.21.0, this parser will allow sorting & filtering a date range.
- While processing, the parser will rearrange the range so that it is always saved to the cache as "low - high" (note that the "8/12/2014 - 7/10/2014" row sorts correctly, eventhough the later date is first)
- This is almost exactly the same demo as Custom Filter Widget Search Type (example 2), but it was added to demonstrate the other supported date formats.
- Click on any of the buttons below to test it out.
Demo
Find:
(mm/dd/yyyy; "sorter-date-range-mdy") column
(dd/mm/yyyy; "sorter-date-range-dmy") column
(yyy/mm/dd; "sorter-date-range-ymd") column
(dd MMMM yyyy; "sorter-date-range-dMMMyyyy") column
(mm/dd/yyyy; "sorter-date-range-mdy") column
(dd/mm/yyyy; "sorter-date-range-dmy") column
(yyy/mm/dd; "sorter-date-range-ymd") column
(dd MMMM yyyy; "sorter-date-range-dMMMyyyy") column
Order |
Date range (mm/dd/yyyy - mm/dd/yyyy) |
Date range (dd/mm/yyyy - dd/mm/yyyy) |
Date range (yyyy/mm/dd - yyyy/mm/dd) |
Date range (dd MMMM yyyy - dd MMMM yyyy) |
|---|---|---|---|---|
| 1 | 04/28/2014 - 07/18/2014 | 28/04/2014 - 18/07/2014 | 2014/04/28 - 2014/07/18 | 28 April 2014 - 18 Jul 2014 |
| 2 | 04/30/2014 - 05/21/2014 | 30/04/2014 - 21/05/2014 | 2014/04/30 - 2014/05/21 | 30 Apr 2014 - 21 May 2014 |
| 6 | 7/15/2014 | 15/7/2014 | 2014/7/15 | 15 Jul 2014 |
| 5 | 07/12/2014 - 07/23/2014 | 12/07/2014 - 23/07/2014 | 2014/07/12 - 2014/07/23 | 12 Jul 2014 - 23 July 2014 |
| 3 | 05/20/2014 - 05/23/2014 | 20/05/2014 - 23/05/2014 | 2014/05/20 - 2014/05/23 | 20 May 2014 - 23 May 2014 |
| 4 | 8/12/2014 - 7/10/2014 | 12/8/2014 - 10/7/2014 | 2014/8/12 - 2014/7/10 | 12 August 2014 - 10 Jul 2014 |
Header
<link href="css/theme.blue.css" rel="stylesheet">
<script src="js/jquery-latest.min.js"></script>
<script src="js/jquery.tablesorter.js"></script>
<!-- date range parsers -->
<script src="js/parsers/parser-date-range.js"></script>
<!-- filter widget & inside range type -->
<script src="js/widgets/widget-filter.js"></script>
<script src="js/widgets/widget-filter-type-insideRange.js"></script>
HTML
Find:<br>
<button type="button" data-column="1">5/4/2014</button> (mm/dd/yyyy; "sorter-date-range-mdy") column<br>
<button type="button" data-column="2">15/7/2014</button> (dd/mm/yyyy; "sorter-date-range-dmy") column<br>
<button type="button" data-column="3">2014/5/20</button> (yyy/mm/dd; "sorter-date-range-ymd") column<br>
<button type="button" data-column="4">18 July 2014</button> (dd MMMM yyyy; "sorter-date-range-dMMMyyyy") column
<p><button type="button" class="reset">Reset</button></p>
<table>
<thead>
<tr>
<th class="order">Order</th>
<th class="sorter-date-range-mdy">Date range (mm/dd/yyyy - mm/dd/yyyy)</th>
<th class="sorter-date-range-dmy">Date range (dd/mm/yyyy - dd/mm/yyyy)</th>
<th class="sorter-date-range-ymd">Date range (yyyy/mm/dd - yyyy/mm/dd)</th>
<th class="sorter-date-range-dMMMyyyy">Date range (dd MMMM yyyy - dd MMMM yyyy)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>04/28/2014 - 07/18/2014</td>
<td>28/04/2014 - 18/07/2014</td>
<td>2014/04/28 - 2014/07/18</td>
<td>28 April 2014 - 18 Jul 2014</td>
</tr>
<tr>
<td>2</td>
<td>04/30/2014 - 05/21/2014</td>
<td>30/04/2014 - 21/05/2014</td>
<td>2014/04/30 - 2014/05/21</td>
<td>30 Apr 2014 - 21 May 2014</td>
</tr>
<tr>
<td>6</td>
<td>7/15/2014</td>
<td>15/7/2014</td>
<td>2014/7/15</td>
<td>15 Jul 2014</td>
</tr>
<tr>
<td>5</td>
<td>07/12/2014 - 07/23/2014</td>
<td>12/07/2014 - 23/07/2014</td>
<td>2014/07/12 - 2014/07/23</td>
<td>12 Jul 2014 - 23 July 2014</td>
</tr>
<tr>
<td>3</td>
<td>05/20/2014 - 05/23/2014</td>
<td>20/05/2014 - 23/05/2014</td>
<td>2014/05/20 - 2014/05/23</td>
<td>20 May 2014 - 23 May 2014</td>
</tr>
<tr>
<td>4</td>
<td>8/12/2014 - 7/10/2014</td>
<td>12/8/2014 - 10/7/2014</td>
<td>2014/8/12 - 2014/7/10</td>
<td>12 August 2014 - 10 Jul 2014</td>
</tr>
</tbody>
</table>
Javascript
$(function() {
// call the tablesorter plugin
$('table').tablesorter({
theme : 'blue',
widgets : ['zebra', 'filter'],
widgetOptions: {
filter_reset: '.reset'
}
});
// filter buttons
$('button').on('click', function() {
var $this = $(this),
filter = [],
column = $this.attr('data-column');
filter[column] = $this.text();
$('table').trigger('search', [ filter ]);
});
});