Angular-Datatables wrong sorting on date

Question

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>

"I'm using the Angular Way with a date filter in my ng-repeat." - please show your code. — davidkonrad
– davidkonrad, Commented Jan 22, 2016 at 8:53

davidkonrad · Accepted Answer · 2018-02-01 08:56:38Z

16

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/XpBcLhlm0Frq3voN6X97?p=preview

edited Feb 1, 2018 at 8:56

answered Jan 22, 2016 at 11:53

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

davidkonrad Over a year ago

@3rules, Thank you for noticing. Have updated the plnkr with a working one. The other was pure junk, dont know how it had ended up to be like that-

3 rules Over a year ago

@davidkonrad my pleasure but plunker still not working or may be link was the same last one.

davidkonrad Over a year ago

@3rules, if you are using Privacy Badger or similar disable it for this plunkrr. It seem to block rawgithub.com ...

3 rules Over a year ago

@davidkonrad yes david it's working now how do you know this issue? And also remove the </div> given please line no 17.

davidkonrad Over a year ago

@3rules, have removed the </div>, thank you. Dont know why this plunkr was so messed up, have perhaps unintentionally overwritten it for long time ago. I just noticed that PB was blocking rawgithub, it seems to be a fairly recent issue github.com/rgrove/rawgit/issues/163

|

Chinmay jain · Accepted Answer · 2017-02-17 12:40:55Z

0

Though it's late, but there is an alternative approach for those who want more flexibility.

You can solve the sorting problem in the way mentioned in the Ultimate Date / Time sorting plugin.

The code is really simple:

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

You can import the plugin from the datatable CDN:

  <script src="https://cdn.datatables.net/plug-ins/1.10.13/sorting/datetime-moment.js"></script>

Note: You'll need to include momentJs in your application in order to use the plugin.

answered Feb 17, 2017 at 12:40

Chinmay jain

9991 gold badge9 silver badges20 bronze badges

Comments

heavyrick · Accepted Answer · 2017-07-06 22:29:36Z

0

I solved this issue creating a filter

daterFilter.js

angular.module("app").filter("dateFilter", function(){
  return function(input) {
    var o = input.replace(/-/g, "/"); // Replaces hyphens with slashes if dd/mm/YYYY format
    return Date.parse(o + " -0000");
  };
});

In html file

<span>[[ ::created_at | dateFilter | date:"dd/MM/yyyy HH:mm"]]</span>

I saw this answer some time ago in this stack:

AngularJS: How to format ISO8601 date format?

answered Jul 6, 2017 at 22:29

heavyrick

3947 silver badges16 bronze badges

Comments

Chandan Agarwal · Accepted Answer · 2022-06-28 13:40:03Z

0

this.dataSource.sortingDataAccessor = (item, property) => {
    switch (property) {
      case 'creationDate': return parse(item.creationDate, 'dd-MM-yyyy', new Date());
    default: return item[property];
  }
};

Add this on ngAfterViewInit method

answered Jun 28, 2022 at 13:40

Chandan Agarwal

4966 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angular-Datatables wrong sorting on date

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related