library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2025-01-12 15:24:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

changed date format

Browse Source
This commit is contained in:
Rob Garrison 2011-10-18 10:52:53 -05:00
parent ab7acf635d
commit 336b5654b9
7 changed files with 229 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.markdown
View File

@ -28,6 +28,14 @@ Included all original [document pages](http://mottie.github.com/tablesorter/docs
View the [complete listing here](http://mottie.github.com/tablesorter/changelog.txt). View the [complete listing here](http://mottie.github.com/tablesorter/changelog.txt).
#### Version 2.0.23 (2011-10-18)
* Changed the `dateFormat` option:
* The settings are now "mmddyyyy", "ddmmyyyy", and "yyyymmdd".
* Changed the date separator to include any of the following: slash, dash, period, comma, space(s) or tab.
* The date format parser will only work with a four digit year.
* Added a [demo page](http://mottie.github.com/tablesorter/docs/example-option-date-format.html).
#### Version 2.0.22.1 (2011-10-15) #### Version 2.0.22.1 (2011-10-15)
* Updated the stickyHeaders widget * Updated the stickyHeaders widget

9
changelog.txt
View File

@ -1,5 +1,14 @@
TableSorter Change Log TableSorter Change Log
Version 2.0.23 (2011-10-18)
============================
* Changed the `dateFormat` option:
* The settings are now "mmddyyyy", "ddmmyyyy", and "yyyymmdd".
* Changed the date separator to include any of the following: slash, dash, period, comma, space(s) or tab.
* The date format parser will only work with a four digit year.
* Added a [demo page](http://mottie.github.com/tablesorter/docs/example-option-date-format.html).
Version 2.0.22.1 (2011-10-15) Version 2.0.22.1 (2011-10-15)
============================ ============================

150
docs/example-option-date-format.html Normal file
View File

@ -0,0 +1,150 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Changing the date format</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<!-- Demo stuff -->
<link rel="stylesheet" href="css/jq.css">
<script src="js/chili/jquery.chili-2.2.js"></script>
<script src="js/chili/recipes.js"></script>
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
dateFormat : "mmddyyyy", // set the default date format
// or to change the format for specific columns, add the dateFormat to the headers option:
headers: {
0: { sorter: "shortDate" }, // dateFormat will parsed as the default above
1: { sorter: "shortDate", dateFormat: "ddmmyyyy" }, // set day first format
2: { sorter: "shortDate", dateFormat: "yyyymmdd" } // set year first format
}
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Changing the date format</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>
<li>The dateFormat option was modified in version 2.0.23 (not part of the original plugin).</li>
<li>The date can be separated by any of the following: slash, dash, period, comma, space(s) or tab (/-., ).</li>
<li>This date format parser will only work with a four digit year. You can <a href="example-parsers.html">write your own</a> if you need a two digit year parser.</a>
</ul>
</p>
<h1>Demo</h1>
<div id="demo"><table class="tablesorter">
<thead>
<tr>
<th>Date MMDDYYYY</th>
<th>Date DDMMYYYY</th>
<th>Date YYYYMMDD</th>
</tr>
</thead>
<tbody>
<tr>
<td>8-7-2011</td>
<td>7-8-2011</td>
<td>2011-8-7</td>
</tr>
<tr>
<td>12/28/2011</td>
<td>28/12/2011</td>
<td>2011/12/28</td>
</tr>
<tr>
<td>6 30 2011</td>
<td>30 6 2011</td>
<td>2011 6 30</td>
</tr>
<tr>
<td>11/1/2011</td>
<td>1/11/2011</td>
<td>2011/11/1</td>
</tr>
<tr>
<td>3.4.2011</td>
<td>4.3.2011</td>
<td>2011.3.4</td>
</tr>
<tr>
<td>07 01-2011</td>
<td>01 7-2011</td>
<td>2011-7 01</td>
</tr>
<tr>
<td>04/5,2011</td>
<td>5/04,2011</td>
<td>2011,04/5</td>
</tr>
<tr>
<td>1/21 2011</td>
<td>21.1/2011</td>
<td>2011/1.21</td>
</tr>
<tr>
<td>5.24-2011</td>
<td>24.5-2011</td>
<td>2011-5.24</td>
</tr>
<tr>
<td>10,14,2011</td>
<td>14,10,2011</td>
<td>2011,10,14</td>
</tr>
<tr>
<td>09 07 2011</td> <!-- lot of spaces between the numbers -->
<td>07 09 2011</td>
<td>2011 09 07</td>
</tr>
<tr>
<td>2 27.2011</td>
<td>27 2.2011</td>
<td>2011 2 27</td>
</tr>
<tr>
<td>8 07 2010</td> <!-- separated by tabs -->
<td>07 8 2010</td>
<td>2010 8 07</td>
</tr>
</tbody>
</table></div>
<h1>Javascript</h1>
<div id="javascript">
<pre class="js"></pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="html"></pre>
</div>
<div class="next-up">
<hr />
Next up: <a href="example-options-headers.html">Basic: Disable header using options &rsaquo;&rsaquo;</a>
</div>
</div>
</body>
</html>

2
docs/example-parsers-class-name.html
View File

@ -101,7 +101,7 @@
<div class="next-up"> <div class="next-up">
<hr /> <hr />
Next up: <a href="example-options-headers.html">Basic: Disable header using options &rsaquo;&rsaquo;</a> Next up: <a href="example-option-date-format.html">Basic: Changing the date format &rsaquo;&rsaquo;</a>
</div> </div>
</div> </div>

51
docs/index.html
View File

@ -36,7 +36,7 @@
</div> </div>
<p> <p>
<strong>Author:</strong> <a class="external" href="http://lovepeacenukes.com">Christian Bach</a><br> <strong>Author:</strong> <a class="external" href="http://lovepeacenukes.com">Christian Bach</a><br>
<strong>Version:</strong> 2.0.22 (forked from <a href="http://tablesorter.com/docs/">version 2.0.5</a>, <a href="../changelog.txt">changelog</a>)<br> <strong>Version:</strong> <a href="http://github.com/Mottie/tablesorter/downloads">2.0.23</a> (forked from <a href="http://tablesorter.com/docs/">version 2.0.5</a>, <a href="../changelog.txt">changelog</a>)<br>
<strong>Licence:</strong> <strong>Licence:</strong>
Dual licensed under <a class="external" href="http://www.opensource.org/licenses/mit-license.php">MIT</a> Dual licensed under <a class="external" href="http://www.opensource.org/licenses/mit-license.php">MIT</a>
or <a class="external" href="http://www.opensource.org/licenses/gpl-license.php">GPL</a> licenses. or <a class="external" href="http://www.opensource.org/licenses/gpl-license.php">GPL</a> licenses.
@ -308,6 +308,7 @@
<li><a href="example-option-digits.html">Dealing with digits!</a></li> <li><a href="example-option-digits.html">Dealing with digits!</a></li>
<li><a href="example-options-headers-digits-strings.html">Dealing with text strings in numerical sorts</a> <span class="tip"><em>New! v2.0.10</em></span></li> <li><a href="example-options-headers-digits-strings.html">Dealing with text strings in numerical sorts</a> <span class="tip"><em>New! v2.0.10</em></span></li>
<li><a href="example-parsers-class-name.html">Disable or set the column parser using class names</a> <span class="tip"><em>New! v2.0.11</em></span></li> <li><a href="example-parsers-class-name.html">Disable or set the column parser using class names</a> <span class="tip"><em>New! v2.0.11</em></span></li>
<li><a href="example-option-date-format.html">Changing the date format</a> <span class="tip"><em>New! v2.0.23</em></span></li>
<li><a href="example-parsers.html">Parser, writing your own</a></li> <li><a href="example-parsers.html">Parser, writing your own</a></li>
<li><a href="example-option-text-extraction.html">Dealing with markup inside cells (textExtraction function)</a></li> <li><a href="example-option-text-extraction.html">Dealing with markup inside cells (textExtraction function)</a></li>
</ul> </ul>
@ -338,9 +339,12 @@
<h4>Change Header Style</h4> <h4>Change Header Style</h4>
<ul> <ul>
<li><a href="example-widget-ui-theme.html">jQuery UI theme widget</a> <span class="tip"><em>New! v2.0.9</em></span></li>
<li><a href="example-option-render-header.html">Modify how the header is rendered to allow for custom styling</a></li> <li><a href="example-option-render-header.html">Modify how the header is rendered to allow for custom styling</a></li>
</ul> </ul>
<br>
<h3>Other</h3> <h3>Other</h3>
<h4>Options &amp; Events</h4> <h4>Options &amp; Events</h4>
<ul> <ul>
@ -493,17 +497,36 @@
<tr id="dateformat"> <tr id="dateformat">
<td><a href="#" class="toggle2">dateFormat</a></td> <td><a href="#" class="toggle2">dateFormat</a></td>
<td>String</td> <td>String</td>
<td>"us"</td> <td>"mmddyyyy"</td>
<td>Set the date format. Here are the available options: <td>Set the date format. Here are the available options. <span class="tip"><em>Modified</em></span> in version 2.0.23.
<div class="collapsible"> <div class="collapsible">
<ul> <ul>
<li><code class="hilight">"us"</code> (default) - "mm-dd-yyyy" or "mm/dd/yyyy"</li> <li><code class="hilight">"mmddyyyy"</code> (default)</li>
<li><code class="hilight">"uk"</code> - "dd-mm-yyyy" or "dd/mm/yyyy"</li> <li><code class="hilight">"ddmmyyyy"</code></li>
<li><code class="hilight">"dd/mm/yy"</code> or <code class="hilight">"dd-mm-yy"</code> - Sort by short year (it appears to sort by day first, not the year)</li> <li><code class="hilight">"yyyymmdd"</code></li>
</ul> </ul>
In previous versions, this option was set as "us", "uk" or "dd/mm/yy". This option was modified to better fit needed date formats. It will only work with four digit years!<br>
<br>
The sorter should be set to "shortDate" and the date format can be set in the "dateFormat" option or set for a specific columns within the "headers" option.
See <a href="example-option-date-format.html">the demo page</a> to see it working.
<pre class="js">$(function(){
$("table").tablesorter({
dateFormat : "mmddyyyy", // default date format
// or to change the format for specific columns,
// add the dateFormat to the headers option:
headers: {
0: { sorter: "shortDate" }, // "shortDate" with the default dateFormat above
1: { sorter: "shortDate", dateFormat: "ddmmyyyy" }, // day first format
2: { sorter: "shortDate", dateFormat: "yyyymmdd" } // year first format
}
});
});</pre>
</div> </div>
</td> </td>
<td></td> <td><a href="example-option-date-format.html">Example</a></td>
</tr> </tr>
<tr id="debug"> <tr id="debug">
@ -551,7 +574,8 @@
// Sort the fifth column by date (e.g. mm/dd/yyyy if the date format is "us") // Sort the fifth column by date (e.g. mm/dd/yyyy if the date format is "us")
4: { sorter: "shortDate" }, 4: { sorter: "shortDate" },
// See example 3: lock the sort order - this option will not work if added as metadata // See example 3: lock the sort order
// this option will not work if added as metadata
5: { lockedOrder: "asc" }, 5: { lockedOrder: "asc" },
// See Example 4: Initial sort order direction of seventh column // See Example 4: Initial sort order direction of seventh column
@ -819,7 +843,9 @@ $(function(){
<pre class="js">$(function(){ <pre class="js">$(function(){
$("table").tablesorter({ $("table").tablesorter({
widgets: ["uitheme"], // initialize ui theme styling widget of the table widgets: ["uitheme"], // initialize ui theme styling widget of the table
widgetUitheme: { css: ["ui-icon-carat-2-n-s", "ui-icon-carat-1-s", "ui-icon-carat-1-n"] } widgetUitheme: {
css: ["ui-icon-carat-2-n-s", "ui-icon-carat-1-s", "ui-icon-carat-1-n"]
}
}); });
});</pre></div> });</pre></div>
</td> </td>
@ -864,7 +890,9 @@ $(function(){
It does not work the same as "update" in that it only adds rows, it does not remove them.<br> It does not work the same as "update" in that it only adds rows, it does not remove them.<br>
Also, use this method to add table rows while using the pager plugin. If the "update" method is used, only the visible table rows continue to exist. Also, use this method to add table rows while using the pager plugin. If the "update" method is used, only the visible table rows continue to exist.
<pre class="js">// Add multiple rows to the table <pre class="js">// Add multiple rows to the table
var $row = $('&lt;tr&gt;&lt;td&gt;Inigo&lt;/td&gt;&lt;td&gt;Montoya&lt;/td&gt;&lt;td&gt;34&lt;/td&gt;&lt;td&gt;$19.99&lt;/td&gt;&lt;td&gt;15%&lt;/td&gt;&lt;td&gt;Sep 25, 1987 12:00PM&lt;/td&gt;&lt;/tr&gt;'); var row = '&lt;tr&gt;&lt;td&gt;Inigo&lt;/td&gt;&lt;td&gt;Montoya&lt;/td&gt;&lt;td&gt;34&lt;/td&gt;' +
'&lt;td&gt;$19.99&lt;/td&gt;&lt;td&gt;15%&lt;/td&gt;&lt;td&gt;Sep 25, 1987 12:00PM&lt;/td&gt;&lt;/tr&gt;',
$row = $(row);
$('table') $('table')
.find('tbody').append($row) .find('tbody').append($row)
.trigger('addRows', [$row]);</pre></div> .trigger('addRows', [$row]);</pre></div>
@ -929,7 +957,8 @@ $(table)
$("td.discount").click(function(){ $("td.discount").click(function(){
// randomize a number // randomize a number
var discount = '$' + Math.round(Math.random() * Math.random() * 100) + '.' + ('0' + Math.round(Math.random() * Math.random() * 100)).slice(-2); var discount = '$' + Math.round(Math.random() * Math.random() * 100) + '.' +
('0' + Math.round(Math.random() * Math.random() * 100)).slice(-2);
$(this).text(discount); $(this).text(discount);
// update the table, so the tablesorter plugin knows its value // update the table, so the tablesorter plugin knows its value

41
js/jquery.tablesorter.js
View File

@ -1,6 +1,6 @@
/* /*
* TableSorter 2.0 - Client-side table sorting with ease! * TableSorter 2.0 - Client-side table sorting with ease!
* Version 2.0.22 * Version 2.0.23
* @requires jQuery v1.2.3 * @requires jQuery v1.2.3
* *
* Copyright (c) 2007 Christian Bach * Copyright (c) 2007 Christian Bach
@ -99,7 +99,7 @@
cancelSelection: true, cancelSelection: true,
sortList: [], sortList: [],
headerList: [], headerList: [],
dateFormat: "us", dateFormat: "mmddyyyy", // other options: "ddmmyyy" or "yyyymmdd"
onRenderHeader: null, onRenderHeader: null,
selectorHeaders: 'thead th', selectorHeaders: 'thead th',
tableClass : 'tablesorter', tableClass : 'tablesorter',
@ -243,8 +243,7 @@
/** Add the table data to main data array */ /** Add the table data to main data array */
c = $(b.rows[i]); c = $(b.rows[i]);
cols = []; cols = [];
// if this is a child row, add it to the last row's children and // if this is a child row, add it to the last row's children and continue to the next row
// continue to the next row
if (c.hasClass(table.config.cssChildRow)) { if (c.hasClass(table.config.cssChildRow)) {
cache.row[cache.row.length - 1] = cache.row[cache.row.length - 1].add(c); cache.row[cache.row.length - 1] = cache.row[cache.row.length - 1].add(c);
// go to the next for loop // go to the next for loop
@ -252,7 +251,7 @@
} }
cache.row.push(c); cache.row.push(c);
for (j = 0; j < totalCells; ++j) { for (j = 0; j < totalCells; ++j) {
cols.push(parsers[j].format(getElementText(table.config, c[0].cells[j], j), table, c[0].cells[j])); cols.push(parsers[j].format(getElementText(table.config, c[0].cells[j], j), table, c[0].cells[j], j));
} }
cols.push(cache.normalized.length); // add position for rowCache cols.push(cache.normalized.length); // add position for rowCache
cache.normalized.push(cols); cache.normalized.push(cols);
@ -650,11 +649,9 @@
config.sortList.push([i, this.order]); config.sortList.push([i, this.order]);
// multi column sorting // multi column sorting
} else { } else {
// the user has clicked on an all // the user has clicked on an already sorted column.
// ready sortet column.
if (isValueInArray(i, config.sortList)) { if (isValueInArray(i, config.sortList)) {
// revers the sorting direction // reverse the sorting direction for all tables.
// for all tables.
for (j = 0; j < config.sortList.length; j++) { for (j = 0; j < config.sortList.length; j++) {
s = config.sortList[j]; s = config.sortList[j];
o = config.headerList[s[0]]; o = config.headerList[s[0]];
@ -918,21 +915,21 @@
}); });
ts.addParser({ ts.addParser({
id: "shortDate", id: "shortDate", // "mmddyyyy", "ddmmyyy" or "yyyymmdd"
is: function(s) { is: function(s) {
return (/\d{1,2}[\/\-]\d{1,2}[\/\-]\d{2,4}/).test(s); // testing for ####-####-#### - so it's not perfect
return (/\d{1,4}[\/\-\,\.\s+]\d{1,4}[\/\-\.\,\s+]\d{1,4}/).test(s);
}, },
format: function(s, table) { format: function(s, table, cell, cellIndex) {
var c = table.config; var c = table.config,
s = s.replace(/\-/g, "/"); format = (c.headers && c.headers[cellIndex]) ? c.headers[cellIndex].dateFormat || c.dateFormat : c.dateFormat; // get dateFormat from header or config
if (c.dateFormat === "us") { s = s.replace(/\s+/g," ").replace(/[\-|\.|\,|\s]/g, "/");
// reformat the string in ISO format if (format === "mmddyyyy") {
s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$1/$2"); s = s.replace(/(\d{1,2})\/(\d{1,2})\/(\d{4})/, "$3/$1/$2");
} else if (c.dateFormat === "uk") { } else if (format === "ddmmyyyy") {
// reformat the string in ISO format s = s.replace(/(\d{1,2})\/(\d{1,2})\/(\d{4})/, "$3/$2/$1");
s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$2/$1"); } else if (format === "yyyymmdd") {
} else if (c.dateFormat === "dd/mm/yy" || c.dateFormat === "dd-mm-yy") { s = s.replace(/(\d{4})\/(\d{1,2})\/(\d{1,2})/, "$1/$2/$3");
s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{2})/, "$1/$2/$3");
} }
return $.tablesorter.formatFloat(new Date(s).getTime()); return $.tablesorter.formatFloat(new Date(s).getTime());
}, },

5
js/jquery.tablesorter.min.js vendored
View File

File diff suppressed because one or more lines are too long