Angular-Datatables wrong sorting on date


I’m using the angular-datatables plugin in my project, which works fine on all types, except for dates.

Example DESC:

  • 01/01/2016
  • 01/08/2015
  • 01/08/2015
  • 01/09/2015

Example ASC:

  • 31/12/2015
  • 31/10/2015
  • 22/10/2015

I’m using the Angular Way with a date filter in my ng-repeat. I have a suspicion that it sorts with a wrong date format. I would like it to sort based on the day. How can I fix this?

<table class="table table-hover" datatable="ng">
                <th>Inv. Date</th>
                <th>Start Date</th>
                <th>End Date</th>
                <th>DKK ex VAT</th>
                <th>Cust. Manager</th>
                <th>Due Date</th>
            <tr ng-repeat="invoice in vm.latestInvoices.LatestInvoices">
                <td>{{invoice.InvoiceDate | date: 'dd/MM/yyyy'}}</td>
                <td>{{invoice.InvoiceStart | date: 'dd/MM/yyyy'}}</td>
                <td>{{invoice.InvoiceEnd | date: 'dd/MM/yyyy'}}</td>
                <td>Customer Manager</td>
                <td>{{invoice.DueDate | date: 'dd/MM/yyyy'}}</td>


dataTables generally does a good job by detecting datatypes for each column. However, if the type detection meets anything that conflicts with for example assumed numbers, the column is turned into default alpha sorting. I strongly believe this is the case here – if the rendered content meets the dd/MM/yyyy criteria 100%, then dataTables should automatically sort that column as date.

Luckily we can force the date datatype through the columns / columnDefs settings. Use for example DTColumnDefBuilder :

$scope.dtColumnDefs = [  
    DTColumnDefBuilder.newColumnDef([3,4,5,11]).withOption('type', 'date')

This forces column 3,4,5 and 11 to be of type date. Include dtColumnDefs in the markup :

<table class="table table-hover" datatable="ng" dt-column-defs="dtColumnDefs">

Example – try to comment out the .withOption('type', 'date') and see the difference ->

Answered By – davidkonrad

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.