NOTE!
- The dateFormat option was modified in version 2.0.23 (not part of the original plugin).
- The dateFormat option will ONLY work with the
shortDate
parser. - The date can be separated by any of the following: slash, dash, period, comma, space(s) or tab (/-., ).
- This date format parser will only work with a four digit year. You can write your own if you need a two digit year parser.
- In versions 2.3+, columns can be disabled using any of the following methods (they all do the same thing), in order of priority:
- jQuery data
data-date-format="mmddyyyy"
(see the Javascript block below on how to set it directly;data-dateFormat
is equivalent todata-date-format
). - metadata
class="{ dateFormat: "mmddyyyy" }"
. This requires the metadata plugin. - headers option
headers : { 0 : { dateFormat: "mmddyyyy" } }
. - header class name
class="dateFormat-mmddyyyy"
. - overall
dateFormat
option setting.
- jQuery data
Demo
Date MMDDYYYY |
Date DDMMYYYY |
Date YYYYMMDD |
---|---|---|
8-7-2011 | 7-8-2011 | 2011-8-7 |
11/1/2011 12:34 AM | 1/11/2011 12:34 AM | 2011/11/1 12:34 AM |
12/28/2011 | 28/12/2011 | 2011/12/28 |
6 30 2011 | 30 6 2011 | 2011 6 30 |
11/1/2011 12:35 AM | 1/11/2011 12:35 AM | 2011/11/1 12:35 AM |
3.4.2011 | 4.3.2011 | 2011.3.4 |
07 01-2011 1:15 PM | 01 7-2011 1:15 PM | 2011-7 01 1:15 PM |
04/5,2011 | 5/04,2011 | 2011,04/5 |
11/1/2011 12:34 PM | 1/11/2011 12:34 PM | 2011/11/1 12:34 PM |
1/21 2011 | 21.1/2011 | 2011/1.21 |
5.24-2011 | 24.5-2011 | 2011-5.24 |
07/01-2011 12:15 PM | 01-7/2011 12:15 PM | 2011/7-01 12:15 PM |
10,14,2011 | 14,10,2011 | 2011,10,14 |
09 07 2011 | 07 09 2011 | 2011 09 07 |
2 27.2011 | 27 2.2011 | 2011 2 27 |
8 07 2010 | 07 8 2010 | 2010 8 07 |
Javascript
$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme : 'blue',
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; set using class names
// 2: { sorter: "shortDate", dateFormat: "yyyymmdd" } // set year first format; set using data attributes (jQuery data)
}
});
});
HTML
<table class="tablesorter">
<thead>
<tr>
<th>Date MMDDYYYY</th>
<th class="sorter-shortDate dateFormat-ddmmyyyy">Date DDMMYYYY</th>
<th data-sorter="shortDate" data-date-format="yyyymmdd">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>11/1/2011 12:34 AM</td>
<td>1/11/2011 12:34 AM</td>
<td>2011/11/1 12:34 AM</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 12:35 AM</td>
<td>1/11/2011 12:35 AM</td>
<td>2011/11/1 12:35 AM</td>
</tr>
<tr>
<td>3.4.2011</td>
<td>4.3.2011</td>
<td>2011.3.4</td>
</tr>
<tr>
<td>07 01-2011 1:15 PM</td>
<td>01 7-2011 1:15 PM</td>
<td>2011-7 01 1:15 PM</td>
</tr>
<tr>
<td>04/5,2011</td>
<td>5/04,2011</td>
<td>2011,04/5</td>
</tr>
<tr>
<td>11/1/2011 12:34 PM</td>
<td>1/11/2011 12:34 PM</td>
<td>2011/11/1 12:34 PM</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>07/01-2011 12:15 PM</td>
<td>01-7/2011 12:15 PM</td>
<td>2011/7-01 12:15 PM</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>