Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

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">
        <thead>
            <tr>
                <th>Client</th>
                <th>Project</th>
                <th>ID</th>
                <th>Inv. Date</th>
                <th>Start Date</th>
                <th>End Date</th>
                <th>DKK ex VAT</th>
                <th>CIG</th>
                <th>Attention</th>
                <th>Cust. Manager</th>
                <th>Regarding</th>
                <th>Due Date</th>
                <th>Finalized</th>
                <th>Paid</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="invoice in vm.latestInvoices.LatestInvoices">
                <td>{{invoice.CompanyName}}</td>
                <td>{{invoice.ProjectName}}</td>
                <td>{{invoice.InvoiceID}}</td>
                <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>{{invoice.DKKexVAT}}</td>
                <td>{{invoice.CustomerInvoiceGroup}}</td>
                <td>{{invoice.Attention}}</td>
                <td>Customer Manager</td>
                <td>{{invoice.Regarding}}</td>
                <td>{{invoice.DueDate | date: 'dd/MM/yyyy'}}</td>
                <td>No</td>
                <td>{{invoice.Paid}}</td>
            </tr>
        </tbody>
    </table>
share|improve this question
    
"I'm using the Angular Way with a date filter in my ng-repeat." - please show your code. – davidkonrad Jan 22 at 8:53
    
Of course! :) Updated! – Mortenkp25 Jan 22 at 10:26
up vote 1 down vote accepted

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 -> http://plnkr.co/edit/de9bd1YBsWMieWXMRaSu?p=preview

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.