mirror of
https://github.com/Mottie/tablesorter.git
synced 2025-01-12 15:24:21 +00:00
changed date format
This commit is contained in:
parent
ab7acf635d
commit
336b5654b9
@ -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
|
||||
|
@ -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)
|
||||
============================
|
||||
|
||||
|
150
docs/example-option-date-format.html
Normal file
150
docs/example-option-date-format.html
Normal 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 ››</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 ››</a>
|
||||
Next up: <a href="example-option-date-format.html">Basic: Changing the date format ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
@ -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 & 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 = $('<tr><td>Inigo</td><td>Montoya</td><td>34</td><td>$19.99</td><td>15%</td><td>Sep 25, 1987 12:00PM</td></tr>');
|
||||
var row = '<tr><td>Inigo</td><td>Montoya</td><td>34</td>' +
|
||||
'<td>$19.99</td><td>15%</td><td>Sep 25, 1987 12:00PM</td></tr>',
|
||||
$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
|
||||
|
@ -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());
|
||||
},
|
||||
|
5
js/jquery.tablesorter.min.js
vendored
5
js/jquery.tablesorter.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user