Date table column sort issue in angular js

Question

I am having some issue while sorting date field in table header. Sort id working properly for string and number. I have gone through http://jsfiddle.net/poppypoop/2463hsvd/. I replaced my json and tested.This is also working on basis of string.

Js Code:

<script>
    var myApp = angular.module("myApp",[]);
    function myCtrl($scope){
        $scope.descending = false;
        $scope.columnToOrderBy = 'date';
        $scope.data = [
           {  
          "defaultWH":"5",
          "flowRouteName":"HIGH RISK",
          "startDate":"01/03/2016",
          "endDate":"23/03/2016",
          "hiddenStartDate":1456837200000,
          "commodityCode":"100042110",
          "commodityId":8,
          "stockingPointId":5
       },
       {  
          "defaultWH":"8",
          "flowRouteName":"HIGH RISK",
          "startDate":"25/04/2016",
          "endDate":"27/04/2016",
          "hiddenStartDate":1459864800000,
          "commodityCode":"100042110",
          "commodityId":8,
          "stockingPointId":8
       },
       {  
          "defaultWH":"8",
          "flowRouteName":"HIGH RISK",
          "startDate":"04/03/2018",
          "endDate":"20/03/2018",
          "hiddenStartDate":1520101800000,
          "commodityCode":"100042110",
          "commodityId":8,
          "stockingPointId":8
       }
        ];  
    }

</script>

Html code:

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <table cellspacing="0" cellpadding="5" border="2">
            <tr>
                <th ng-click=" columnToOrderBy ='startDate'; descending = !descending">
                    Date
                </th>
                <th ng-click=" columnToOrderBy ='Location'; descending = !descending">
                    Location
                </th>
            </tr>
            <tr ng-repeat="item in data | orderBy:columnToOrderBy:descending">
                <td><div ng-bind="item.startDate">       </div></td>
                <td><div ng-bind="item.flowRouteName">           </div></td>
            </tr>
        </table>
    </div>
</div>

This is working on basis of String not basis of date. Thanks for your help.

Answer 1

Your dates are modeled by strings, so the order by applied as if dates were strings.

If you want dates to be ordered as if they were dates, well, you have to convert your strings to Date object.

Not

"startDate": "01/03/2016",

But

// I let you deal with localizing your dates correctly
// Here it represents the 3rd of January (m/d/y)
// But I guess you want the 1st of March (d/m/y)
// see this post for help http://stackoverflow.com/questions/5619202/converting-string-to-date-in-js
"startDate": new Date("01/03/2016"), 

var myApp = angular.module("myApp", []);

function myCtrl($scope) {
  $scope.descending = false;
  $scope.columnToOrderBy = 'date';
  $scope.data = [{
    "defaultWH": "5",
    "flowRouteName": "HIGH RISK",
    "startDate": new Date("01/03/2016"),
    "endDate": "23/03/2016",
    "hiddenStartDate": 1456837200000,
    "commodityCode": "100042110",
    "commodityId": 8,
    "stockingPointId": 5
  }, {
    "defaultWH": "8",
    "flowRouteName": "HIGH RISK",
    "startDate": new Date("05/04/2016"),
    "endDate": "27/04/2016",
    "hiddenStartDate": 1459864800000,
    "commodityCode": "100042110",
    "commodityId": 8,
    "stockingPointId": 8
  }, {
    "defaultWH": "8",
    "flowRouteName": "HIGH RISK",
    "startDate": new Date("04/03/2018"),
    "endDate": "20/03/2018",
    "hiddenStartDate": 1520101800000,
    "commodityCode": "100042110",
    "commodityId": 8,
    "stockingPointId": 8
  }];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <table cellspacing="0" cellpadding="5" border="2">
      <tr>
        <th ng-click=" columnToOrderBy ='startDate'; descending = !descending">
          Date
        </th>
        <th ng-click=" columnToOrderBy ='Location'; descending = !descending">
          Location
        </th>
      </tr>
      <tr ng-repeat="item in data | orderBy:columnToOrderBy:descending">
        <td>
          <div ng-bind="item.startDate | date"></div>
        </td>
        <td>
          <div ng-bind="item.flowRouteName"></div>
        </td>
      </tr>
    </table>
  </div>
</div>