Sorting Footable rows by Date Column (gg/mm/aaaa)

Question

I'm using footable library for showing table. Each row has a Date column, I would like to sort this table by the Date column (on column header click).

<table class="footable table table-stripped toggle-arrow-tiny">
<thead>
  <tr>
    <th data-type="date-eu">Data Scadenza</th>
    <th>Titolo</th>
    <th>Inviato da</th>
    <th>Link</th>
  </tr>
</thead>
<tbody>
  <tr ng-repeat="promemoria in elencoPromemoria">
    <td>{{promemoria.DataScadenza | date:"dd/MM/yyyy"}}</td>
    <td>{{promemoria.Titolo}}</td>
    <td>{{promemoria.InviatoDa}}</td>
    <td><a ng-show="promemoria.Link" ng-attr-ui-sref="{{promemoria.Link || false}}"><i class="fa fa-search-plus"></i></a></td>
  </tr>
</tbody>

The variable promemoria.DataScadenza contains a date in the format yyyy-mm-dd so:

• If I use {{promemoria.DataScadenza | date:"dd/MM/yyyy"}} I can see the date in the right euro-zone (dd/mm/yyyy) style but I can't sort correctly.
• If I use {{promemoria.DataScadenza}} I can sort correctly but I see the dates in the USA-zone (yyyy-mm-dd) style.

PS: The other two columns (Titolo,InviatoDa) are sorted alphabetically and working fine.

Answer 1

You can use data-format-string attribute in the table header to define custom format for data.

Below is redefined version of your code

<table class="footable table table-stripped toggle-arrow-tiny">
<thead>
  <tr>
    <th data-type="date" data-format-string="dd/MM/yyyy">Data Scadenza</th>
    <th>Titolo</th>
    <th>Inviato da</th>
    <th>Link</th>
  </tr>
</thead>
<tbody>
  <tr ng-repeat="promemoria in elencoPromemoria">
    <td>{{promemoria.DataScadenza | date:"dd/MM/yyyy"}}</td>
    <td>{{promemoria.Titolo}}</td>
    <td>{{promemoria.InviatoDa}}</td>
    <td><a ng-show="promemoria.Link" ng-attr-ui-sref="{{promemoria.Link || false}}"><i class="fa fa-search-plus"></i></a></td>
  </tr>
</tbody>