AngularJS orderBy does not work when use date() format

Question

OrderBy:'date' works fine, but unfortunately it does not order properly when add or edit the date()

<tr ng-repeat="expense in filteredlist = (expenses | filter:filterlist) | pagination: currentPage : numPerPage | orderBy:'date'">

Demo: http://codepen.io/anon/pen/VLRRpq

Answer 1

Your problem is that the old dates are being compared as Strings, and the new dates added are Date objects.

Converting all of the old dates to Date Objects is one way to fix this:

$scope.expenses = [/* your data */];
$scope.expenses.forEach(function(expense){ 
    expense.date = new Date(expense.date); 
});

(Codepen updated: http://codepen.io/anon/pen/jPJJGV)

The opposite works as well - converting the dates to (correctly formatted) Strings when saving a new expense:

$scope.addExpense = function () {
    $scope.newexpense.date =  $scope.newexpense.date.toISOString();
    /* The rest of your creating code */
}

(Codepen updated to show this method: http://codepen.io/anon/pen/oXVVoJ)

The choice between the above paths will depend on your situation; you'll have to take into account factors such as how you're using the data (i.e. do you need to perform Date-like operations on the data? Then use the first solution), how it's expected by the server (does the server demand ISOStrings? If so, use the second solution), etc.

But both clearly work in the updated Codepen solutions.