Permalink
Browse files

changed date format

  • Loading branch information...
1 parent ab7acf6 commit 336b5654b959f09b1d7a915cc8ed659d41f64e90 @Mottie committed Oct 18, 2011
View
@@ -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
@@ -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)
============================
@@ -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>
+
@@ -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
@@ -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 @@
<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 @@
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 @@
$("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
@@ -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,16 +243,15 @@
/** 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
continue;
}
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());
},
Oops, something went wrong.

0 comments on commit 336b565

Please sign in to comment.