How To Sort Date And Date/Time Columns in Data Tables

June 15, 2017 Appirio

By: Munib Rehman

Problem Definition
Data tables internally sort the dates for specific formats only, but we need to decipher some workarounds other formats . The default date format of the datatable is YYYY/MM/DD, which means if the dates are not set in this format, it will require a change in the code.

Here are three workarounds to working on data tables:

1) Proxy Sorting

This is sorting of the required field on the basis of another hidden date field.  This hidden date field must have a data table date sorted format. Make sure the column of date to be sorted is set to DD/MM/YYYY. I also added a hidden column in YYYY/MM/DD format (which can then be sorted by data table), and pointed my DD/MM/YYYY date column to sort on the hidden column.

The sample code for the table having a single date column and corresponding hidden date column is:

$ (document) .ready (function () {
$ ('#example').Datatable ({
"aoColumns": [
{"iDataSort": 1}, // Date format DD/MM/YYYY, sorting dependent on index 1
{"bVisible": false), // Date format YYYY/MM/DD (datatable default) made hidden.

2) Sorting Plug-in

Use this plug-in to modify the same according to the needed format.

The plug-in is already built to deal with the following formats:


` HH:mm` or ``


`dd/mm/YYY hh:ii:ss`

‘Sort dates in the format `dd/mm/YY`

But depending on the need, the date format can vary, depending on the project. So we this plug-in and implement and manipulate the sorting to our needs.
The code for the same can be found 

How does it work?

var customDateDDMMYYYYoOrd = function (date) {
// 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", "JULY", "AUG", "SEP", "OCT", "NOV", "DEC"]) * 100) + (dateParts[0]*1);

Going through the code snippet of the plug-in above, we see that this plug-in is breaking the date data into year, months, and days (also minutes and seconds) format. Multiply those with respective constant multipliers, and add the values to get the final value. This final value is set up in different rows for comparison, and sorting is implemented.

3) Moment.js plug-in

For DateTime formats like DD/MM/YYYY hh:ii:ss — which is frequently used in some European countries — or an effective alternative can be used for formats like DD/MM, Do YYYY, HH:MM:SS (i.e. Ultimate date/time Sorting plug-in). The complete plug-in code is only 15 lines.

$.fn.dataTable.moment = function ( format, locale ) {
var types = $.fn.dataTable.ext.type;
// Add type detection
types.detect.unshift( function ( d ) {
return moment ( d, format, locale, true ) .isValid() ?
'moment–'+format :
} );
// Add sorting method – use an integer for the sorting
types.order[ 'moment–'+format+'–pre' ] = function ( d ) {
return moment ( d, format, locale, true ).unix();

But the sorting magic happens when you use moment.js. More information about moment.js can be found here.

How does it Work?

The Moment.js plug-in can be divided into two separate sub-plug-ins:

  • Automatic type detection sub-plug-in: This plug-in is attached to $.fn.dataTable.ext.type.detect array, which is an array of methods on which the data table loops over. t works to check and detect if the data in a column matches any of the methods. Additionally, this sub-plug-in calls moment.isValid() method to see if the data passed into the function is valid.
  • style=”font-weight: 400;”>Ordering Data sub-plug-in: This plug-in is attached to the $.fn.dataTable.ext.type.order object. It uses the name of the type, which has been detected by the detect plug-in explained above, and sorts the data accordingly.

We can create our own plug-ins by just creating  an unformatted numeric representation of the date and  time, and using moment().unix(), because data tables have built-in order comparison for numeric and string values.

Previous Article
6 Questions to Ask Before You Begin Testing Workday
6 Questions to Ask Before You Begin Testing Workday

By Anthony Wang Welcome to Appirio’s Workday blog series. Where we explore how we enable the Worker Experie...

Next Article
5 Great New Salesforce Wave Features In The Summer ‘17 Release
5 Great New Salesforce Wave Features In The Summer ‘17 Release

There is a lot to love about Salesforce Wave — the rich and intuitive interface, the powerful visualization...