AngularJS orderBy date

Question

I have something like this:

  <div ng-repeat="i in inv">
      <p>{{i.dueDate}}</p>
  </div>

I'd like to order by oldest date first. I know there's a way to do it but I can't figure it out. Can anyone help?

Here is the sample js:

 $scope.inv = [
    {
        name: "Paul",
        dueDate: "5/21/2014"
    },
    {
        name: "Dan",
        dueDate: "5/22/2014"
    },
    {
        name: "Randy",
        dueDate: "1/12/2015"
    }
 ];

Answer 1

you need to convert your strings to YYYY-MM-DD format

<li ng-repeat="item in inv | orderBy:orderByDate">{{item.name}} </li>

$scope.orderByDate = function(item) {
var parts = item.dueDate.split('/');
var date = new Date(parseInt(parts[2], parseInt(parts[0]), parseInt(parts[1])));

return date;

};

Demo http://plnkr.co/edit/o6fCDyiqkkU9YVWwZC09?p=preview

Answer 2

This should work for you:

<div ng-repeat="i in inv | orderBy:'-dueDate'">
  <p>{{i.dueDate}}</p>
</div>

Answer 3

You have to define a customizer function, then use it in orderBy expression. For example:

$scope.dueDateFormatter = function(i) {
   var dateParts = i.dueDate.split(/\//);
   return dateParts[2] 
       + '-' + (dateParts[0] < 10 ? '0' + dateParts[0] : dateParts[0]) 
       + '-' + (dateParts[1] < 10 ? '0' + dateParts[1] : dateParts[1]);
};

<div ng-repeat="i in inv | orderBy:dueDateFormatter">
   <p>{{i.dueDate}}</p>
</div>

Demo. The function basically reorders the date string, so that Year comes first, Month next and Day last. If you use moment.js or similar library, you can use their parsers instead.