changed date format

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

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).
#### 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)
* Updated the stickyHeaders widget

View File

@ -1,5 +1,14 @@
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)
============================

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>

View File

@ -101,7 +101,7 @@
<div class="next-up">
<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>

View File

@ -36,7 +36,7 @@
</div>
<p>
<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>
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.
@ -308,6 +308,7 @@
<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-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-option-text-extraction.html">Dealing with markup inside cells (textExtraction function)</a></li>
</ul>
@ -338,9 +339,12 @@
<h4>Change Header Style</h4>
<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>
</ul>
<br>
<h3>Other</h3>
<h4>Options &amp; Events</h4>
<ul>
@ -493,17 +497,36 @@
<tr id="dateformat">
<td><a href="#" class="toggle2">dateFormat</a></td>
<td>String</td>
<td>"us"</td>
<td>Set the date format. Here are the available options:
<td>"mmddyyyy"</td>
<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">
<ul>
<li><code class="hilight">"us"</code> (default) - "mm-dd-yyyy" or "mm/dd/yyyy"</li>
<li><code class="hilight">"uk"</code> - "dd-mm-yyyy" or "dd/mm/yyyy"</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">"mmddyyyy"</code> (default)</li>
<li><code class="hilight">"ddmmyyyy"</code></li>
<li><code class="hilight">"yyyymmdd"</code></li>
</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>
</td>
<td></td>
<td><a href="example-option-date-format.html">Example</a></td>
</tr>
<tr id="debug">
@ -551,7 +574,8 @@
// Sort the fifth column by date (e.g. mm/dd/yyyy if the date format is "us")
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" },
// See Example 4: Initial sort order direction of seventh column
@ -819,7 +843,9 @@ $(function(){
<pre class="js">$(function(){
$("table").tablesorter({
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>
</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>
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
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')
.find('tbody').append($row)
.trigger('addRows', [$row]);</pre></div>
@ -929,7 +957,8 @@ $(table)
$("td.discount").click(function(){
// 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);
// update the table, so the tablesorter plugin knows its value

View File

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

File diff suppressed because one or more lines are too long