Datatable is not sorting with date in dd/MM/yyyy format Angular

Question

I am using the angular-datatable plugin with the following environemnt:

node version:v11.1.0
angular version:7.2.4
angular-cli version:7.3.0
jquery version:3.3.22
datatables version:1.10.13
angular-datatables version:^7.0.0

The HTML is:

<div class="col ">
  <table datatable [dtOptions]="dtOptions"  class="table table-striped" style="font-size: 0.8rem;">
    <thead>
    <tr class="text-center">
      <th scope="col">Coupon Code</th>
      <th scope="col">Coupon State</th>
      <th scope="col">Issuance Channel</th>
      <th scope="col">Create Date</th>
      <th scope="col">Expire Date</th>
      <th scope="col">Number Of Redemptions</th>
      <th scope="col">Redemptions</th>
    </tr>
    </thead>
    <tbody>
    <tr class="text-center" *ngFor="let object of allCoupons">
      <td scope="col">{{object.couponCode}}</td>
      <td scope="col">{{object.couponState}}</td>
      <td scope="col">{{object.channel}}</td>

      <td
        scope="col">{{object.createDate | date: 'dd/MM/yyyy' }}</td>

      <td
        scope="col">{{object.expireDate }}</td>

      <td scope="col"> {{object.redemptions.length}}</td>

      <td>
        <div class="btn-group btn-group-sm w-100">
          <button type="button" class="w-100 btn btn-light fas fa-list-alt "
                  title="See Redemptions"
                  (click)="openRedeemModal(content,object.redemptions)">
          </button>
        </div>
      </td>
    </tr>

    </tbody>
  </table>
</div>

And the dtOptions are:

dtOptions: DataTables.Settings = {};

ngOnInit() {
this.dtOptions = {
  columnDefs: [


    { targets: 3, type: 'date' }

  ]

};
 }

However the result is not sorting via the date as you can see in the demo:

https://angular-datatables-gitter-smpc8z.stackblitz.io

I cannot find of another way to correct the issue and I have tried everything I found online.

I have found some solutions with JQuery but nothing that actually works for angular. — idipous, Feb 08 '19 at 12:38

score 1 · Answer 1 · answered Feb 08 '19 at 13:19

1

Try putting date in yyyy/MM/dd format. I think that might solve the issue for sorting but the date format will be reversed.

answered Feb 08 '19 at 13:19

Sundaram Arunachalam

21
3

Yes this works out of the box. But the problem is that I want the dd/MM/yyyy – idipous Feb 08 '19 at 13:33
Try putting it like this `yyyy/MM/dddd/MM/yyyy` and hide the span in css `span { display : none }`. saw this idea [here](https://stackoverflow.com/questions/12003222/datatable-date-sorting-dd-mm-yyyy-issue) – Sundaram Arunachalam Feb 09 '19 at 05:43

score 1 · Accepted Answer · answered Feb 14 '19 at 10:48

I was finally able to solve this. Putting it here for future reference.

What was needed was to get the following plugin (code not mine)

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"date-euro-pre": function ( a ) {
var x;

if ( $.trim(a) !== '' ) {
  var frDatea = $.trim(a).split(' ');
  var frTimea = (undefined != frDatea[1]) ? frDatea[1].split(':') : [00, 00, 00];
  var frDatea2 = frDatea[0].split('-');
  x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + ((undefined != frTimea[2]) ? frTimea[2] : 0)) * 1;
}
else {
  x = Infinity;
}

return x;
},

"date-euro-asc": function ( a, b ) {
return a - b;
  },

 "date-euro-desc": function ( a, b ) {
return b - a;
 }
} );

And create a folder in src/plug-ins/date-euro.js

Then in the view (html file) I just put:

  <td scope="col">{{object.createDate | date: 'dd-MM-yyyy'}}</td>

And added the path above under scripts: in angular.json.

And it works.

Datatable is not sorting with date in dd/MM/yyyy format Angular

2 Answers2