Is there a way to shim the "dd-MON-yyyy" date format for IE

Question

The organization I support dictates that all dates will be shown in dd-MON-yyyy format (10-SEP-2006, 08-MAY-2013). Please see http://jsfiddle.net/jhfrench/zpWWa/ for an example dataset.

When run on Chrome, dataTables correctly recognizes this pattern as a date.

When run on IE7, dataTables (or IE?) does not recognize this pattern as a date. Unfortunately, we have to support IE7. Is there a way to shim the "dd-MON-yyyy" format for IE, but not for Chrome or other browsers that natively support that format?

I am using IE conditions to specify the HTML tag, so I could key off of <HTML class="lt-ie9">; I'm also using Modernizr on this page (if there's a relevant test).

IE will recognize that format without the hyphens. Are they required too? — Kevin Boucher, May 08 '13 at 20:55
[this question](http://stackoverflow.com/questions/12003222/datatable-date-sorting-dd-mm-yyyy-issue) seems very similar. Have you tried this approach? FWIW, dd-MON-yyyy is still ambiguous in cultures such as Japan where month numbers (not names) are used. — explunit, May 13 '13 at 16:51
It is a similar question, but that solution introduces problems because I'd have to pre-define which columns are dates. — Jeromy French, May 13 '13 at 20:22

Shaun McCarthy · Answer 1 · 2013-05-13T20:58:10.037

Rather than try to shim IE7, I think the simplest solution would be to write your own sort function and then call it for all the columns where the date format is used. This is pretty easy to do with DataTables, outlined here:

http://www.datatables.net/plug-ins/sorting

You can manually define the table to use the new sorting algorithm for your column, but that's a little clumsy, as you will need to do this wherever you use the format. Instead, you can autodetect, as outlined here:

http://www.datatables.net/plug-ins/type-detection

I created a fork of your fiddle with a quick solution here - I just converted the dates to a simple number - as long as you trust the data, this should be fine. Otherwise, you might want to convert to actual date objects, which is probably a more robust way to do it.

http://jsfiddle.net/pFdyK/

Code:

// Put these somewhere better than a global :)
var months = "JAN_FEB_MAR_APR_MAY_JUN_JUL_AUG_SEP_OCT_NOV_DEC".split("_");
function monthToOrd(month) {
    return $.inArray(month, months);
}
function customDateToOrd(date) {
    // Convert to a number YYYYMMDD which we can use to order
    var dateParts = date.split(/-/);
    var day = dateParts[0];
    var month = monthToOrd(dateParts[1]);
    var year = dateParts[2];
    var numericDate = (year * 10000) + (month * 100) + day;
    return numericDate;
}

// This will help DataTables magic detect your custom format
// Unshift so that it's the first data type (overridding in built ones)
jQuery.fn.dataTableExt.aTypes.unshift(
    function ( sData )
    {
        // You might want to make this check a little tighter so you don't match
        // invalid dates, but this should do for now
        if (sData.match(/\d{2}-[A-Za-z]{3}-\d{4}/))
            return 'custom-date';
        else
            return null;
    }
);

// define the sorts
jQuery.fn.dataTableExt.oSort['custom-date-asc']  = function(a,b) {
    var ordA = customDateToOrd(a);
    var ordB = customDateToOrd(b);
    return (ordA < ordB) ? -1 : ((ordA > ordB) ? 1 : 0);
};

jQuery.fn.dataTableExt.oSort['custom-date-desc'] = function(a,b) {
    var ordA = customDateToOrd(a);
    var ordB = customDateToOrd(b);
    return (ordA < ordB) ? 1 : ((ordA > ordB) ? -1 : 0);
};

$(document).ready(function() {
    $('html').addClass('lt-ie9');
   $('table.datatable').dataTable();
} );

NB code assumes things in the date format like the capitalization, but you should get the idea — Shaun McCarthy, May 13 '13 at 20:52

score 0 · Accepted Answer · edited May 23 '17 at 10:30

Expanding on Shaun's fine answer, there are at least two ways to go about testing the need to shim for dd-MMM-yyyy format. I've modified Shaun's code after intense consultation with JSLint (I swear it hates every line of ECMA I write).

Using IE conditionals

If you're already using IE conditionals (), then you can just test for HTML.lt-ie9 and conditionally define the new sorting algorithm, then call dataTables:

//test for html.lt-ie9
if ($('html.lt-ie9').length) {
    //create the new magic sorting
    var customDateDDMMMYYYYToOrd = function (date) {
        "use strict"; //let's avoid tom-foolery in this function
        // Convert to a number YYYYMMDD which we can use to order
        var dateParts = date.split(/-/);
        return (dateParts[2] * 10000) + ($.inArray(dateParts[1].toUpperCase(), ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]) * 100) + dateParts[0];
    };

    // This will help DataTables magic detect the "dd-MMM-yyyy" format; Unshift so that it's the first data type (so it takes priority over existing)
    jQuery.fn.dataTableExt.aTypes.unshift(
        function (sData) {
            "use strict"; //let's avoid tom-foolery in this function
            if (/^([0-2]?\d|3[0-1])-(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)-\d{4}/i.test(sData)) {
                return 'custom-date-dd-mmm-yyyy';
            }
            return null;
        }
    );

    // define the sorts
    jQuery.fn.dataTableExt.oSort['custom-date-dd-mmm-yyyy-asc'] = function (a, b) {
        "use strict"; //let's avoid tom-foolery in this function
        var ordA = customDateDDMMMYYYYToOrd(a),
            ordB = customDateDDMMMYYYYToOrd(b);
        return (ordA < ordB) ? -1 : ((ordA > ordB) ? 1 : 0);
    };

    jQuery.fn.dataTableExt.oSort['custom-date-dd-mmm-yyyy-desc'] = function (a, b) {
        "use strict"; //let's avoid tom-foolery in this function
        var ordA = customDateDDMMMYYYYToOrd(a),
            ordB = customDateDDMMMYYYYToOrd(b);
        return (ordA < ordB) ? 1 : ((ordA > ordB) ? -1 : 0);
    };
};

//now call the dataTable plugin against the target tables (in this case, any table with `class="dataTable"`)
$('table.datatable').dataTable();

See the IE conditionals example at http://jsfiddle.net/jhfrench/nEsCt/

Testing with Modernizr

On the other hand, if you're inclined to use Modernizr to test for the capability, we can define the Modernizr test, then use Modernizr to execute the test and conditionally load the shim magic (from a .js file), then call dataTables:

//define the Modernizr test
Modernizr.addTest('valid_date_dd_mmm_yyyy', function() {
    return !isNaN(Date.parse("17-MAY-2013"));
});

//if Modernizr determines "dd-mmm-yyyy" dates are not supported, load the following JavaScript resources
Modernizr.load([
    {
        test: Modernizr.valid_date_dd_mmm_yyyy,
        nope: 'http://appliedinter.net/Workstream/common_files/js/dataTable_shim_dd-MMM-yyyy.js',
        complete: function () {
            $(document).ready(function () {
                //now call the dataTable plugin against the target tables (in this case, any table with `class="dataTable"`)
                $('table.datatable').dataTable();
            });
        }
    }
]);

See the Modernizr approach at http://jsfiddle.net/jhfrench/tNkGC/

Is there a way to shim the "dd-MON-yyyy" date format for IE

2 Answers2