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>