Sort List of items by date data attribute

by thetrickster

HTML

<!--

In your web app list layout you can use the following markup:

<li class="sort-item" data-event-date="{tag_event date}">
    YOUR OTHER WEB APP TAGS HERE
</li>

This will work with your custom event date if your field is called "Event Date".  If it has a different name, just insert your custom tag in the "data-event-date" attribute.

-->


<ul class="sort-list">
    <li class="sort-item" data-event-date="14-Feb-2013">Valentine's Day on 14-Feb-2013</li>
    <li class="sort-item" data-event-date="25-Dec-2013">Christmas on 25-Dec-2013</li>
    <li class="sort-item" data-event-date="14-Jul-2013">Bastille Day on 14-Jul-2013</li>
    <li class="sort-item" data-event-date="01-Jan-2013">New Year's Day on 01-Jan-2013</li>
    <li class="sort-item" data-event-date="31-Oct-2013">Halloween on 31-Oct-2013</li>

</ul>

JavaScript

(function($){
    var container = $(".sort-list");
    var items = $(".sort-item");
    
    items.each(function() {
       // Convert the string in 'data-event-date' attribute to a more
       // standardized date format
       var BCDate = $(this).attr("data-event-date").split("-");
       var standardDate = BCDate[1]+" "+BCDate[0]+" "+BCDate[2];
       standardDate = new Date(standardDate).getTime();
       $(this).attr("data-event-date", standardDate);
 
    });
    

    items.sort(function(a,b){
        a = parseFloat($(a).attr("data-event-date"));
        b = parseFloat($(b).attr("data-event-date"));
        return a>b ? -1 : a<b ? 1 : 0;
    }).each(function(){
        container.prepend(this);
    });

})(jQuery);

/* This script sorts your list in descending order... to change it to ascending order change the "less than" operator (<) to "greater than" (>) */