Blog / 2010 / March / 15

jQuery Tablesorter and Dates

March 15, 2010

I'm using the tablesorter from http://www.tablesorter.com, which is a jQuery plugin which supports re-ordering table rows by sorting on the data in them. Unfortunately, this doesn't work well with dates.

31-01-2000 Format

To sort dates in this simple format, use the following:

$(document).ready(function(){
  $("#list").tablesorter({widgets: ['zebra'], dateFormat: 'uk'});
});

Here's the HTML Django template snippet:

<td title='{{ir.date|date:"D, jS F Y"}}'>{{ir.date|date:"d-m-Y"}}</td>      
<td title='{{ir.date_action_required|date:"D, jS F Y"}}'>{{ir.date_action_required|date:"d-m-Y"}}</td>

This produces tables with dates in, which can be sorted correctly.

Jan 31, 2000 Format

Here's an example of some code that sorts using a custom format.

var lMonthNames = {};
lMonthNames["Jan"] = "01";
lMonthNames["Feb"] = "02";
lMonthNames["Mar"] = "03";
lMonthNames["Apr"] = "04";
lMonthNames["May"] = "05";
lMonthNames["Jun"] = "06";
lMonthNames["Jul"] = "07";
lMonthNames["Aug"] = "08";
lMonthNames["Sep"] = "09";
lMonthNames["Oct"] = "10";
lMonthNames["Nov"] = "11";
lMonthNames["Dec"] = "12";

$.tablesorter.addParser({
  id: 'monthDayYear',
  is: function(s) {
    return false;
  },
  format: function(s) {
    if (s.length > 0) {
      var date = s.match(/^(\w{3})[ ](\d{1,2}),[ ](\d{4})$/);
      var m = lMonthNames[date[1]];
      var d = String(date[2]);
      if (d.length == 1) {d = "0" + d;}
      var y = date[3];
      return '' + y + m + d;
    } else {
      return '';
    }
  },
  type: 'numeric'
});

$(document).ready(function(){
  $("#irlist").tablesorter(
    {
      headers:
      {
        7: { sorter: "monthDayYear" },
        8: { sorter: "monthDayYear" }
      },
      widgets: ['zebra']
    });
});

This was modified from the original example so that it coped with blank cells.

The HTML is similar to that shown for the simple example above, but it uses a different date format.

<td title="{{ir.date|date:"D, jS F Y"}}">{{ir.date|date:"M j, Y"}}</td>      
<td title="{{ir.date_action_required|date:"D, jS F Y"}}">{{ir.date_action_required|date:"M j, Y"}}</td>

31st Jan 2009 Format with optional fields

This version of the parser will work with dates in the format 31st Jan 2009, where the day and month are optional. If these are not specified, then the first of the month and January is assumed respectively. This will still sort correctly, assuming these defaults.

var lMonthNames = {};
lMonthNames["Jan "] = "01";
lMonthNames["Feb "] = "02";
lMonthNames["Mar "] = "03";
lMonthNames["Apr "] = "04";
lMonthNames["May "] = "05";
lMonthNames["Jun "] = "06";
lMonthNames["Jul "] = "07";
lMonthNames["Aug "] = "08";
lMonthNames["Sep "] = "09";
lMonthNames["Oct "] = "10";
lMonthNames["Nov "] = "11";
lMonthNames["Dec "] = "12";

$.tablesorter.addParser({
  id: 'dayMonthYear',
  is: function(s) {
    return false;
  },
  format: function(s) {
    if (s.length > 0) {
      var date = s.match(/^(\d{1,2}[sndrth]{2} )?(\w{3} )?(\d{4})$/);

      var d='01';
      if (date[1]) {
        d = '' + parseInt(String(date[1]));
        if (d.length == 1) {
            d = "0" + d;
        }
      }

      var m = '01';
      if (date[2]) {
        m = lMonthNames[date[2]];
      }
      var y = date[3];
      return '' + y + m + d;
    } else {
      return '';
    }
  },
  type: 'numeric'
});