Question

Howdy,

Ive been looking around for some sort of jQuery plugin to do what I require but so far haven’t fond one that does quite what I need.

I have created a web app for a client using our CMS where they are able to enter details for upcoming webinars that they will be running.

Part of the data the user enters is the day (01 – 31) and month (JAN – DEC) which appears inside a little calendar element I’ve made with CSS. The month gets put inside <span class="m">MONTH</span> and the day gets put into <span class="d">DAY</span> as you can see in the example below.

These are then put onto a page in a grid-stack formation.

What I cannot seem to do is find a way to order these elements using that particular data.

Any help would be much appreciated!

<div class="webinar-item">
    <div class="cal">
        <span class="m">sep</span>
        <span class="d">14</span>
    </div>

    <div class="data">
        <a href="#" title="Webinar Title">
            <h2>Webinar Title</h2>

            <span class="clearfix st Specific-Times">
                <span class="s">
                    <em>Start:</em>10:00am
                </span>
                <span class="f">
                    <em>Finish:</em>12:30pm
                </span>
            </span>

            <span class="price">
                <em>Price:</em>FREE
            </span>

            <p class="overview-1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt sagittis nunc. Curabitur mollis hendrerit diam ac iaculis. Phasellus velit neque, aliquet eu viverra a, congue id sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec magna justo, viverra nec bibendum semper, porttitor pellentesque purus. In ante metus, tincidunt eu suscipit sit amet, imperdiet id justo. Phasellus elementum egestas nibh, vitae sodales nunc aliquet non.
            </p>
        </a>
        <a href="#">go to meeting</a>
    </div>
</div>

P.S. There’s nothing stopping me from pulling this data in multiple times for the purpose of ordering.

Answer 1

The ideal would be to add a data attribute to webinar-item that has a string date in a format that is regognized by Date.parse. jQUery can get or set this data using data() method. It can also be readily attained from a datepicker that you would likely implement for user.

<div class="webinar-item" data-date="12/15/2012">/* add hours/mins*/

Then a custom sorter can be generated using UTC times.

function sortDate( a, b){
  return parseDate(a) > parseDate(b) ? true :false;    
} 

function parseDate( el){
    return Date.parse($(el).data('date'));
}

 $('#content').html( $('.webinar-item').sort(sortDate));

DEMO http://jsfiddle.net/TxFqu/2

EDIT: Better yet, simply store UTC time in data-date attribute and get rid of Date.Parse completely in this part of code