Ordering divs by a date entered by a user - jquery

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.

do you have lots of `
` and you want to arrange them by date? — t q, Oct 29 '12 at 01:43
The easiest solution is likely to sort the results that are coming from the database with an `ORDER By` rather than using `jQuery`. Do you need to be able to re-sort them after they are on the page? — doublesharp, Oct 29 '12 at 01:44
You could something like this: http://stackoverflow.com/questions/5773950/how-to-keep-an-javascript-object-array-ordered-while-also-maintaining-key-lookup — travega, Oct 29 '12 at 01:49
@tq Sorry if I wasn't specific enough, I want to order the `
` by the date that is inside the calendar element. — interactronaut, Oct 29 '12 at 01:52

charlietfl · Accepted Answer · 2012-10-29T02:44:59.233

4

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

edited Oct 29 '12 at 02:44

answered Oct 29 '12 at 01:55

charlietfl

170,828
13
121
150

ive never seen this `data-date=` can you explain that and its relationship to `Date.parse` please – t q Oct 29 '12 at 03:00
1

@tq `data-` attributes are part of html5 but can be read in older browsers also( even IE6). See jQuery API : http://api.jquery.com/data/#data-html5 – charlietfl Oct 29 '12 at 03:04
@charlietfl This is fantastic, thanks - there is however a problem as the CMS we are using for this project can only output the month as a three letter string as per example, is the a way around this? – interactronaut Oct 29 '12 at 09:30
dates are not trivial but I was just playing with `Date.parse('nov 03, 2011 10:20')` format and it works. Could run this on page load to create the data for each main element to reduce overhead at sort time – charlietfl Oct 29 '12 at 12:46
Am very surprised dates aren't being stored in some common database format. I bet they are and server code is already parsing into 3 letters – charlietfl Oct 29 '12 at 12:48

score 0 · Answer 2 · answered Oct 29 '12 at 02:07

Here's what I would do.

function sortItems(descending) {
    descending = !!descending;
    // converts it into a boolean
    var months = ['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'];
    // define your months here
    var items = $('.webinar-item').get();
    // get all the available nodes
    var parent = $('.webinar-item').parent();
    // assuming there's a unique, single parent
    var year = (new Date()).getFullYear();
    // assuming it's the current year
    items.sort(function(a,b) {
        var m1 = months.indexOf($(a).find('>.cal>.m').text()); // month 1
        var d1 = parseInt($(a).find('>.cal>.d').text()); // day 1
        var m2 = months.indexOf($(b).find('>.cal>.m').text()); // month 2
        var d2 = parseInt($(b).find('>.cal>.d').text()); // day 2
        var dt1 = new Date(year,m1,d1);
        var dt2 = new Date(year,m2,d2);
        if (descending)
            return dt1 > dt2 ? -1 : (dt1 < dt2 ? 1 : 0);
        return dt1 > dt2 ? 1 : (dt1 < dt2 ? -1 : 0);
    });
    $.each(items,function(idx,elm) { parent.append(elm) });
}

You can call this function like sortItems(); for the ascending and sortItems(true); for the descending order.

Ordering divs by a date entered by a user - jquery

2 Answers2