How to sort by dates in Angular

Question

I want to sort columns in ng-repeat in AngularJs.

I have something like this:

<th class="cl_sort_init" ng-click="predicate='EstimatedCloseDate';
    reverse=!reverse" ng-class="{'cl_sort_desc': 
predicate=='EstimatedCloseDate'&&reverse==true, 'cl_sort_asc': 
predicate=='EstimatedCloseDate'&&reverse==false}">Close Date</th>

However EstimatedCloseDate is a string. Hence it doesnt work the way it should. How do I make it work as dates just for this column. Other columns are strings and they work just fine.

Any ideas and suggestions !!!

XrXr · Accepted Answer · 2014-06-20 00:19:45Z

1

Depending on the format of the date string, you might be able to do

(new Date(EstimatedCloseDate))

This will parse the date string then convert it into a date object, which will play nice with sorting If this doesn't work, you will have to write your own date parser, which eventually turns the date into an int or Date object

edited Jun 20, 2014 at 0:19

answered Jun 20, 2014 at 0:08

XrXr

2,0671 gold badge14 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paul Sasik Over a year ago

Why worry about the extra conversion to integers? A date time should sort just fine.

XrXr Over a year ago

@Paul Sasik oh nice I didn't know that :)

Community · Accepted Answer · 2017-05-23 12:13:23Z

0

In your predicate you should be able to convert the string to date time. No other conversion should be needed. See here for string to date conversion: Converting string to date in js and format particulars.

If your date format is unusual check out libraries like datejs for help.

But here are a few snippets converting several date strings into dates. Notice that the last conversion fails.

var dtString = "2010-12-25";
var dt = new Date(dtString);
console.log(dtString + " = " + dt);

dtString = "12/25/2010";
dt = new Date(dtString);
console.log(dtString + " = " + dt);

dtString = "25/12/2010";
dt = new Date(dtString);
console.log(dtString + " = " + dt);

Output:

2010-12-25 = Fri Dec 24 2010 18:00:00 GMT-0600 (CST)
12/25/2010 = Sat Dec 25 2010 00:00:00 GMT-0600 (CST)
25/12/2010 = Invalid Date

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Jun 20, 2014 at 0:09

Paul Sasik

81.9k23 gold badges152 silver badges192 bronze badges

4 Comments

SaiBand Over a year ago

I tried something like this: <th class="cl_sort_init" ng-click="predicate=controller.formatDate(EstimatedCloseDate);reverse=!reverse" ng-class="{'cl_sort_desc': predicate==controller.formatDate(EstimatedCloseDate) &&reverse==true, 'cl_sort_asc': predicate==controller.formatDate(EstimatedCloseDate) &&reverse==false}">Close Date</th>. It did not work. I have method called formatDate in the controller like this: formatDate:(date)=> return new Date(date)

SaiBand Over a year ago

Thanks for your reply. I tried it on similar lines you suggested. What am I doing wrong in the above snipped.

Paul Sasik Over a year ago

@SaiBand: Could you provide some example dates that you're passing into your formatDate function? It's possible that the format is not being recognized by the Date constructor. Also, please don't paste code into comments. It's very hard to read.

Paul Sasik Over a year ago

@SaiBand: If you see my code snippet in the edit you'll see that new Date() will work if it can recognize the format. So the format of your date string is your prime suspect for why the code isn't working.

Collectives™ on Stack Overflow

How to sort by dates in Angular

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related