2013-03-26 21:05:21 +00:00
<!DOCTYPE html>
< html >
< head >
2016-01-10 22:24:57 +00:00
< meta charset = "utf-8" >
< title > jQuery tablesorter - Assorted date parsers< / title >
2013-03-26 21:05:21 +00:00
<!-- jQuery -->
2014-05-21 22:09:23 +00:00
< script src = "js/jquery-latest.min.js" > < / script >
2013-03-26 21:05:21 +00:00
<!-- 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-02 05:44:14 +00:00
th { width: 14%; }
2013-03-26 21:05:21 +00:00
< / style >
< link href = "../css/theme.blue.css" rel = "stylesheet" >
< script src = "../js/jquery.tablesorter.js" > < / script >
<!-- load month, weekday and two digit year parsers -->
< script src = "../js/parsers/parser-date-month.js" > < / script >
< script src = "../js/parsers/parser-date-weekday.js" > < / script >
< script src = "../js/parsers/parser-date-two-digit-year.js" > < / script >
2016-08-18 19:37:15 +00:00
<!-- https://sugarjs.com/docs/#/DateParsing -->
2014-05-21 22:09:23 +00:00
< script src = "js/sugar.min.js" > < / script >
2013-09-04 00:44:05 +00:00
< script src = "../js/parsers/parser-date.js" > < / script >
2013-03-26 21:05:21 +00:00
< script id = "js" > $ ( f u n c t i o n ( ) {
2016-07-20 08:03:14 +00:00
// See https://mottie.github.io/tablesorter/docs/example-widget-grouping.html
2015-11-02 05:44:14 +00:00
// for details on how to use CLDR data for a locale to add data for this parser
// CLDR returns { sun: "Sun", mon: "Mon", tue: "Tue", wed: "Wed", thu: "Thu", ... }
// or copy the data directly as it is shown here:
// ************************
// French localization modified from days "abbreviated" format
// https://github.com/unicode-cldr/cldr-dates-modern/blob/master/main/fr/ca-gregorian.json
// It does *not* include the periods
$.tablesorter.dates.weekdays.fr = {
"sun" : "Dim",
"mon" : "Lun",
"tue" : "Mar",
"wed" : "Mer",
"thu" : "Jeu",
"fri" : "Ven",
"sat" : "Sam"
};
// CLDR returns an object { 1: "Jan", 2: "Feb", 3: "Mar", ..., 12: "Dec" }
// French localization modified from months "abbreviated" format
// https://github.com/unicode-cldr/cldr-dates-modern/blob/master/main/fr/ca-gregorian.json
// It does *not* include the periods
$.tablesorter.dates.months.fr = {
"1" : "Janv",
"2" : "Févr",
"3" : "Mars",
"4" : "Avr",
"5" : "Mai",
"6" : "Juin",
"7" : "Juil",
"8" : "Août",
"9" : "Sept",
"10" : "Oct",
"11" : "Nov",
"12" : "Déc"
};
2013-03-26 21:05:21 +00:00
// call the tablesorter plugin
$("table").tablesorter({
theme : 'blue',
2015-11-02 05:44:14 +00:00
// option used by weekday, month & globalize parsers (v2.24.1)
globalize : {
// columns that use French data
2 : { lang: 'fr' },
4 : { lang: 'fr' }
},
2013-11-14 02:31:26 +00:00
widgets : ["zebra"],
// date range used by the two-digit year parser (added v2.14.0)
dateRange : 30
2013-03-26 21:05:21 +00:00
});
});< / script >
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
< h2 > Assorted date 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 >
2016-01-10 22:24:57 +00:00
< / p >
< ul >
< li > In < span class = "version" > v2.24.1< / span > ,
< ul >
< li > Updated weekday & month parsers to better integrate with < a href = "https://github.com/jquery/globalize" > jQuery Globalize< / a > .< / li >
< li > This demo now includes a column for French named weekdays & months.< / li >
< / ul >
< / li >
< li > Parse Dates with these parsers
< ul >
2016-08-18 19:37:15 +00:00
< li > The "Date" column is using the < a href = "https://sugarjs.com/docs/#/DateParsing" > sugar< / a > library to parse dates. Make sure to include the sugar library and the sugar-date-parser.< / li >
2016-01-10 22:24:57 +00:00
< li > The "Weekday" column uses the included "weekday" parser. You can modify parser to match whatever language you are using.< / li >
< li > The "Month" column uses the included "month" parser. You can also modify the month names within the parser to match whatever language you are using.< / li >
< li > The "Year" column is just using the included two digit year parser:
< ul >
< li > Formats for "mmddyy", "ddmmyy" and "yymmdd" are available< / li >
< li > Within the parser code is a < code > range< / code > variable which is set to < code > 50< / code > years range, which sets the date be within +/- range of the listed two digit year.< / li >
< li > So if the current year is < code > 2020< / code > , and the listed two digit year is < code > 80< / code > (< code > 2080 - 2020 > 50< / code > ), it becomes < code > 1980< / code > .< / li >
< li > If the listed two digit year is < code > 50< / code > (< code > 2050 - 2020 < 50< / code > ), then it becomes < code > 2050< / code > . I hope that makes it clearer.< / li >
< li > Try out the two digit year calculator below the table.< / li >
< li > In < span class = "version" > v2.14.0< / span > , the range can be set using the < code > dateRange< / code > option (see the initialization code below).< / li >
< / ul >
< / li >
< li > The "Time" column is using the built-in time parser which has been always been included with tablesorter .< / li >
< / ul >
< / li >
< / ul >
2013-03-26 21:05:21 +00:00
< h1 > Demo< / h1 >
< div id = "demo" > < table class = "tablesorter" >
< thead >
< tr >
< th class = "sorter-sugar" > Date< / th >
< th class = "sorter-weekday" > Weekday< / th >
2015-11-02 05:44:14 +00:00
< th class = "sorter-weekday" > Weekday (French)< / th >
2013-03-26 21:05:21 +00:00
< th class = "sorter-month" > Month< / th >
2015-11-02 05:44:14 +00:00
< th class = "sorter-month" > Month (French)< / th >
2013-03-26 21:05:21 +00:00
< th class = "sorter-mmddyy" > MM/DD/YY< / th > <!-- "sorter - ddmmyy" also available -->
< th class = "sorter-time" > Time< / th >
< / tr >
< / thead >
< tbody >
2015-11-02 05:44:14 +00:00
< tr > < td > next friday< / td > < td > Friday< / td > < td > Vendredi< / td > < td > Aug< / td > < td > Août< / td > < td > 02/1/16< / td > < td > 12:00 PM< / td > < / tr >
< tr > < td > today< / td > < td > Sunday< / td > < td > Dim< / td > < td > September< / td > < td > Septembre< / td > < td > 1/2/16< / td > < td > 00:00< / td > < / tr >
< tr > < td > last Tuesday< / td > < td > Fri< / td > < td > Ven< / td > < td > Mar< / td > < td > Mars< / td > < td > 11/1/15< / td > < td > 18:00< / td > < / tr >
< tr > < td > the day after tomorrow< / td > < td > Wed< / td > < td > Mer< / td > < td > July< / td > < td > Juillet< / td > < td > 01/1/16< / td > < td > 13:00< / td > < / tr >
< tr > < td > 2010-05-25T12:30:40.299+01:00< / td > < td > Monday< / td > < td > Lun< / td > < td > Jan< / td > < td > Janvier< / td > < td > 1/11/15< / td > < td > 1:30 PM< / td > < / tr >
< tr > < td > May 25th of next year< / td > < td > Tues< / td > < td > Mardi< / td > < td > Nov< / td > < td > Novembre< / td > < td > 1/1/15< / td > < td > 14:00< / td > < / tr >
< tr > < td > 25 May 2010< / td > < td > Tuesday< / td > < td > Mar< / td > < td > November< / td > < td > Nov< / td > < td > 3/1/15< / td > < td > 1:58 PM< / td > < / tr >
< tr > < td > the last day of March< / td > < td > Sat< / td > < td > Sam< / td > < td > December< / td > < td > Décembre< / td > < td > 1/15/15< / td > < td > 2:10 PM< / td > < / tr >
< tr > < td > last month< / td > < td > Wednesday< / td > < td > Mercredi< / td > < td > April< / td > < td > Avr< / td > < td > 11/11/16< / td > < td > 13:50< / td > < / tr >
< tr > < td > one day before yesterday< / td > < td > Thursday< / td > < td > Jeudi< / td > < td > Feb< / td > < td > Février< / td > < td > 5/1/15< / td > < td > 4:00 AM< / td > < / tr >
2013-03-26 21:05:21 +00:00
< / tbody >
< / table > < / div >
< h3 > Two digit year calculator:< / h3 >
< div > two digit year < input class = "tdy" type = "number" min = "0" max = "99" value = "20" > becomes < span class = "result" > 2020< / span > < / div >
< div class = "params" >
( < label > range< / label > < input class = "range" type = "number" value = "50" min = "0" max = "99" >
< label > "current year"< / label > < input class = "current" type = "number" value = "2011" min = "1900" max = "9999" > )
< / div >
< h1 > Page Header< / h1 >
< div >
< pre class = "prettyprint lang-html" > < !-- blue theme stylesheet with additional css styles added in v2.0.17 -->
< link rel=" stylesheet" href=" ../css/theme.blue.css" >
< !-- tablesorter plugin -->
< script src=" ../js/jquery.tablesorter.js" > < /script>
< !-- load month, weekday and two digit year parsers -->
< script src=" ../js/parsers/parser-date-month.js" > < /script>
< script src=" ../js/parsers/parser-date-weekday.js" > < /script>
< script src=" ../js/parsers/parser-date-two-digit-year.js" > < /script>
2016-08-18 19:37:15 +00:00
< !-- https://sugarjs.com/docs/#/DateParsing -->
2013-03-26 21:05:21 +00:00
< script src=" ../js/sugar.js" > < /script>
< script src=" ../js/parsers/parser-date-sugar.js" > < /script> < / pre >
< / div >
< h1 > Javascript< / h1 >
< div id = "javascript" >
< pre class = "prettyprint lang-javascript" > < / pre >
< / div >
< h1 > HTML< / h1 >
< div id = " html " >
< pre class = "prettyprint lang-html" > < / pre >
< / div >
< div class = "next-up" >
< hr / >
Next up: < a href = "example-widget-filter.html" > Applying the filter widget › › < / a >
< / div >
< / div >
< style >
.result, .tdy { color: red; }
.params { font-size: 0.8em; }
< / style >
< script >
$(function(){
var tdy = $('.tdy'), // two digit year
a = $('.result'), // answer
r = $('.range'), // range
c = $('.current'), // current year
y = new Date().getFullYear();
tdy.val( (y + 20).toString().slice(-2) ); // use this year + 20
c.val( y );
$('input').on('change', function(){
var y = parseInt(tdy.val(), 10),
result = 1900 + y,
range = parseInt(r.val(), 10);
if (y < 10 ) { tdy . val ( ' 0 ' + y ) ; }
y = parseInt(c.val(), 10);
while (y - result > range) {
result += 100;
}
a.html(result);
}).change();
});
< / script >
< / body >
< / html >
