how to sort by date (new) with jquery isotope

Question

Forgive me as I'm a bit novice to JS, just know enough to manipulate.

For those familiar with Isotope ( http://isotope.metafizzy.co/docs/sorting.html ), I have a button at the top of a page to sort by date. Isotope finds the element

<span class="date"> 01/04/2012 </span>

with this:

$container.isotope({
    getSortData : {
        date : function ( $elem ) {
        return $elem.find('.date').text();
}});

Which works fine, but I need to flip (descend) the date order

Isotope has a function:

$('#container').isotope({ 
  sortBy : 'date',
  sortAscending : false
});

But I can't get it to work - that just makes the default set sort by date, rather than sorting when I click. I think this is just a question of syntax... how/where can I put sortAscending: false ??

Thanks...

EDIT Viewing some source from Demos, I see that:

<a href="#sortAscending=false">

Can be done, but I'm already sorting by passing this:

<a href="#sortBy=date">

Which finds a the span from earlier with the date info...

Answer 1

Here is how I did it, jsFiddle

$container.isotope({
    itemSelector: '.element',
    getSortData: {
        date: function ($elem) {
            return Date.parse($elem.find('.date').text());
        }
    }
});

It doesn't seem to matter what format the date is in, and works ascending and descending.

The parse() method parses a date string and returns the number of milliseconds between the date string and midnight of January 1, 1970.

Basically it turns your date strings into nice solid numbers which are easy to compare.

Answer 2

Heres what I did to sort by date.

If your date is in the format of '01/01/2012' then you need to convert it to a javascript date object.

getSortData: {
    date: function ($elem) {
        var dateStr = $elem.find('.date').text(),
            dateArray = dateStr.split('/'),
            year = dateArray[2],
            month = dateArray[0],
            day = dateArray[1];
        return new Date(year, month, day);
    }
}

then you do your usual

$('#container').isotope({ sortBy: 'date' });