DataTables and moment.js not sorting by date correctly

3
votes

I'm trying to use the information on https://datatables.net/blog/2014-12-18 to make DataTables sort a column of dates which are in dd/mm/yyyy format, e.g. 11/10/2018 (representing 11th October 2018).

I have included the following scripts - in this order:

  • jquery.dataTables.1.10.7.min.js (locally hosted)
  • //cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js
  • moment.js (version 2.10.3, locally hosted)

My DataTables initialisation looks like this, as per the information on the URL above:

$(document).ready(function() {
    $.fn.dataTable.moment( 'd/m/Y' );

    $('#coursesTable').DataTable({"searching": false
    });
});

But when I click the date heading in my #coursesTable it gives the following output:

enter image description here

Obviously this is wrong because if the dates are ordered chronologically - most recent first - then 06/09/2017 should appear before 07/08/2017 - but that's not the order they appear in.

When ordering them the other way (oldest first) it gives the same error - i.e. the order is still incorrect:

enter image description here

I can't understand why this is occurring?

2
jquerydatatables
Did you tried $.fn.dataTable.moment( 'dd/MM/YYYY' ); – Jitendra G2
You should provide an example of the data you are using, and/or how you initialize the DataTable. – davidkonrad
The initialization code is there @davidkonrad. The data is rendered on page load via a PHP script and it simply outputs the date as shown - e.g. 06/02/2017 – Andy

2 Answers

6
votes

Try to change the format to this, according to Moment.js Documentation:

$.fn.dataTable.moment( 'DD/MM/YYYY' );

Here's a working fiddle: http://jsfiddle.net/4f275sa1/

As suggested by @davidkonrad, columnDefs are not needed. And 'DD/MM/YYYY' is the correct format in this case, because the question uses days and months with leading zeroes.

3
votes

The documentation is really vague, but you still need to define the column type:

columnDefs: [{
  target: 0, //index of column
  type: 'datetime-moment'
}]

And as @DavidCzadilek comment, you need use another date format $.fn.dataTable.moment('D/M/YYYY') (the suggested DD/MM/YYYY will not work)

http://jsfiddle.net/xmhn4wpj/