2015-02-24 06:00:52 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > jQuery plugin: Tablesorter - Date range parsers< / title >
<!-- jQuery -->
< script src = "js/jquery-latest.min.js" > < / script >
<!-- Demo stuff -->
< link rel = "stylesheet" href = "css/jq.css" >
< link href = "css/prettify.css" rel = "stylesheet" >
< script src = "js/prettify.js" > < / script >
< script src = "js/docs.js" > < / script >
< style >
2015-11-21 05:11:12 +00:00
th.order { width: 4%; }
th { width: 24%; }
2015-02-24 06:00:52 +00:00
< / style >
< link href = "../css/theme.blue.css" rel = "stylesheet" >
< script src = "../js/jquery.tablesorter.js" > < / script >
< script src = "../js/jquery.tablesorter.widgets.js" > < / script >
< script src = "../js/widgets/widget-filter-type-insideRange.js" > < / script >
< script src = "../js/parsers/parser-date-range.js" > < / script >
< script id = "js" > $ ( f u n c t i o n ( ) {
// 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 ]);
});
});< / script >
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
< h2 > Date range parsers< / h2 >
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
< p class = "tip" >
< em > NOTE!< / em >
< ul >
2015-11-21 05:11:12 +00:00
< li > In < span class = "version" > v2.24.6< / span > , added a new date range parser which uses this format: "dd MMMM yyyy"; added to the last column.< / li >
2015-03-05 16:04:59 +00:00
< li > Added < span class = "version" > v2.21.0< / span > , this parser will allow sorting & filtering a date range.< / li >
2015-02-24 06:00:52 +00:00
< li > 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)< / li >
< li > This is almost exactly the same demo as < a href = "example-widget-filter-custom-search2.html" > Custom Filter Widget Search Type (example 2)< / a > , but it was added to demonstrate the other supported date formats.< / li >
< li > Click on any of the buttons below to test it out.< / li >
< / ul >
< / p >
< h1 > Demo< / h1 >
< div id = "demo" > Find:< br >
2015-11-21 05:11:12 +00:00
< 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
2015-02-24 06:00:52 +00:00
< p > < button type = "button" class = "reset" > Reset< / button > < / p >
< table >
< thead >
< tr >
2015-11-21 05:11:12 +00:00
< th class = "order" > Order< / th >
2015-02-24 06:00:52 +00:00
< 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 >
2015-11-21 05:11:12 +00:00
< th class = "sorter-date-range-dMMMyyyy" > Date range (dd MMMM yyyy - dd MMMM yyyy)< / th >
2015-02-24 06:00:52 +00:00
< / tr >
< / thead >
< tbody >
< tr >
2015-11-21 05:11:12 +00:00
< td > 1< / td >
2015-02-24 06:00:52 +00:00
< td > 04/28/2014 - 07/18/2014< / td >
< td > 28/04/2014 - 18/07/2014< / td >
< td > 2014/04/28 - 2014/07/18< / td >
2015-11-21 05:11:12 +00:00
< td > 28 April 2014 - 18 Jul 2014< / td >
2015-02-24 06:00:52 +00:00
< / tr >
< tr >
2015-11-21 05:11:12 +00:00
< td > 2< / td >
2015-02-24 06:00:52 +00:00
< td > 04/30/2014 - 05/21/2014< / td >
< td > 30/04/2014 - 21/05/2014< / td >
< td > 2014/04/30 - 2014/05/21< / td >
2015-11-21 05:11:12 +00:00
< td > 30 Apr 2014 - 21 May 2014< / td >
2015-02-24 06:00:52 +00:00
< / tr >
< tr >
2015-11-21 05:11:12 +00:00
< td > 6< / td >
2015-02-24 06:00:52 +00:00
< td > 7/15/2014< / td >
< td > 15/7/2014< / td >
< td > 2014/7/15< / td >
2015-11-21 05:11:12 +00:00
< td > 15 Jul 2014< / td >
2015-02-24 06:00:52 +00:00
< / tr >
< tr >
2015-11-21 05:11:12 +00:00
< td > 5< / td >
2015-02-24 06:00:52 +00:00
< td > 07/12/2014 - 07/23/2014< / td >
< td > 12/07/2014 - 23/07/2014< / td >
< td > 2014/07/12 - 2014/07/23< / td >
2015-11-21 05:11:12 +00:00
< td > 12 Jul 2014 - 23 July 2014< / td >
2015-02-24 06:00:52 +00:00
< / tr >
< tr >
2015-11-21 05:11:12 +00:00
< td > 3< / td >
2015-02-24 06:00:52 +00:00
< td > 05/20/2014 - 05/23/2014< / td >
< td > 20/05/2014 - 23/05/2014< / td >
< td > 2014/05/20 - 2014/05/23< / td >
2015-11-21 05:11:12 +00:00
< td > 20 May 2014 - 23 May 2014< / td >
2015-02-24 06:00:52 +00:00
< / tr >
< tr >
2015-11-21 05:11:12 +00:00
< td > 4< / td >
2015-02-24 06:00:52 +00:00
< td > 8/12/2014 - 7/10/2014< / td >
< td > 12/8/2014 - 10/7/2014< / td >
< td > 2014/8/12 - 2014/7/10< / td >
2015-11-21 05:11:12 +00:00
< td > 12 August 2014 - 10 Jul 2014< / td >
2015-02-24 06:00:52 +00:00
< / tr >
< / tbody >
< / table > < / div >
2015-11-21 05:11:12 +00:00
< h1 > Header< / h1 >
< div >
< pre class = "prettyprint lang-html" > < 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> < / pre >
< / div >
2015-02-24 06:00:52 +00:00
< h1 > HTML< / h1 >
< div id = "html" >
< pre class = "prettyprint lang-html" > < / pre >
< / div >
< h1 > Javascript< / h1 >
< div id = "javascript" >
< pre class = "prettyprint lang-javascript" > < / pre >
< / div >
< / div >
< / body >
< / html >
