Sort a date column in jQuery DataTable

This tutorial will teach you two ways for properly sorting a date column in a jQuery DataTable using Moment.js.

Out of the box, the jQuery DataTables plugin is able to detect some standard date formats like "2023-10-22" and sort date columns properly.

But for more complicated date formats especially where the month is expressed as characters instead of numbers like for example "26 Oct 2023", DataTable will not be able to sort date columns on its own.

Consider this basic DataTable setup that demonstrates this problem.

To solve this problem, you have two options that depend on how these date values are populated in your table.

Solution #1: If date values are already formatted and rendered in the desired format.
Solution #2: Use DataTable to convert and render the dates in the desired format.

Solution #1: Date values are already formatted and rendered in the desired format

Consider this scenario:
On the server-side, you fetch some data from the database and the date values in this data are in the format "2023-10-22". The format conversion of the date values happens on the server-side so that when the page loads and the table is rendered, the date values are already in the desired format such as "22 Oct, 2023".

This solution is applicable for such scenarios.

Step 1: Include the Moment.js library in your HTML page.

Copycopy code to clipboard
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

Step 2: Inform DataTable about the desired date format

Copycopy code to clipboard
$(document).ready(function() {
  DataTable.datetime('D MMM, YYYY');
  
  $("table.my-table").DataTable({
  	order: [[2, 'desc']]
  });
});

And that should do it!🎉

Check out all the possible date formats in Moment.js.

Solution #1: Use DataTable to convert and render the dates in the desired format

This method is useful when the dates in the DataTable are not already formatted in the desired format from the server-side.

If the original date format is something that DataTable can understand, then you can use DataTable to handle the format conversion which will implicitly take care of any sorting issues.

Consider this scenario:
You fetch data from the database and get back date values in the format "2023-10-22" from the database. No format conversion is performed on the server-side and the dates are added to the table in the same format as they were fetched. You can now follow the steps below to let DataTable convert and render these dates in the desired format i.e. "22 Oct, 2023".

Step 1: Include the Moment.js library same as the first solution.

Step 2: Make sure the date values in your HTML code are in a format that DataTable can understand implicitly.

Copycopy code to clipboard
...
<tr>
  <td>Saurabh Misra</td>
  <td>saurabh@example.com</td>
  <td>2023-10-22</td>
</tr>
...

In case the original format is also complicated and not something that DataTable will implicitly understand, then you can specify the value of the render property in the next step as DataTable.render.datetime(from, to, locale).
So in our example, you can set it to something like:
DataTable.render.datetime( "YYYY-MM-DD", "D MMM, YYYY", "en_IN" ).
This basically allows you to specify the format of the source data as well.
More information about this is available in the official DataTable date-time helpers documentation.

Step 3: Use the display format for date values within the DataTable configuration options using the render property of the columnDefs array option.

Copycopy code to clipboard
$( document ).ready( function(){
  $( "table.my-table" ).DataTable({
    columnDefs: [{ 
        target: 2, 
        render: DataTable.render.datetime( "D MMM, YYYY" ) 
    }],
    order: [[2, 'desc']]
  });
});

Woo Hoo!🎉 You should now have proper sorting on the date column.

Hope this helps!🙏