Tablesorter + Datepicker Date Format Broken

Question

When using datepicker in tablesorterk, such as This Example it says:

// add any of the jQuery UI Datepicker options here (http://api.jqueryui.com/datepicker/)

which we can assume that includes dateFormat but for some reason, the only dateFormat that works is the one in the example and default.

Works

dateFormat : 'M dd, yy'
// comparison: Oct 13, 2013

dateFormat : 'M dd, yy'
// comparison Sep 22, 2013

Doesn't Work

dateFormat : 'D M dd'
// comparison: Fri Oct 04

dateFormat : 'M dd'
// comparison Sep 22

Example:

JQuery

$(function() {
  $("table").tablesorter({
    widthFixed : true,

    widgets: ["filter"],
    widgetOptions : {
      filter_formatter : {
        0 : function($cell, indx){
          return $.tablesorter.filterFormatter.uiDateCompare( $cell, indx, {
            dateFormat : 'D, M dd, yy',
            changeMonth : true,
            changeYear : true,
            compare : '='
          });
        }
      }
    }
  });
});

HTML

<table class="tablesorter">
  <thead>
    <tr>
      <th data-placeholder="Sort By Date">Date (one input; greater than)</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Wed, Jun 26, 2013</td></tr>
    <tr><td>Wed, Aug 21, 2013</td></tr>
    <tr><td>Sun, Oct 13, 2013</td></tr>
    <tr><td>Sat, Jul 6, 2013</td></tr>
    <tr><td>Tue, Dec 10, 2012</td></tr>
  </tbody>
</table>

it's a minor change to the date format but it results in the table not being able to filter. Is there a different format needed? Am I missing a library?

Libraries

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/cupertino/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="jquery.tablesorter.min.js"></script>
<script src="jquery.metadata.js"></script>
<script src="jquery.tablesorter.widgets.js"></script>
<script src="jquery.tablesorter.widgets-filter-formatter.js"></script>

Answer 1

This issue is likely due to the plugin not detecting that column as a date column. The sorter ends up using the default text parser for that reformatted date column so the sort would be wrong.

When the filter compares dates, it looks for parsed data for that column and compares it to the inputted filter (also parsed).

I didn't make a complete demo for you, but try including this parser and see if it works for you.

$.tablesorter.addParser({
    id: "date-ignore-weekday",
    is: function (s) {
        return false;
    },
    format: function (s, table) {
        // probably not the best regex, but it works
        var date = s.match(/\w+,\s+(.*)/);
        return date ? new Date(date[1] || '').getTime() : s;
    },
    type: "numeric"
});

$('table').tablesorter({
    theme: 'blackice',
    headers: {
        0: {
            sorter: "date-ignore-weekday"
        }
    }
});