javascript: How to hide DIVs/ULs that represent past dates?

Question

I have some code that looks like this:

<h3>Thursday Sep 10</h3>
<ul>great stuff in here</ul>

<h3>Friday Sep 18</h3>
<ul>other stuff in here</ul>

They have a basic jQuery hidey-showy thing happening: click on the H3, and the UL underneath expands or contracts. By default they are all showing/open.

I'd like to set it up so that any date that has passed (like Sep 10 in this example) is contracted by default.

I don't seem to be able to get my CMS to spit out a nice compare-able date (like epoch time) to use as an ID for the H3. Is there a way I can use js's Date() function to build something like that out of the existing information ("Thursday Sep 10"), or some other way entirely to get this done?

(All of the dates are in 2009 and the site won't exist in 2010, so hardcoding the year into any functions is A-OK if that's what needs to be done.)

Thanks!

Answer 1

The first hurdle is to convert your text dates into valid strings that can initialize JavaScript date objects.

The conversion process (including valid string formats) is covered on http://programming.top54u.com/post/Javascript-Convert-String-to-Date.aspx.

Unfortunately, your text representations are not valid inputs for the JavaScript Date constructor. You will need to write a function to convert your strings into a valid representation before using them in the Date constructor.

Once you have your Date objects initialized, you can compare them (see "Compare Two Dates" on http://www.w3schools.com/jS/js_obj_date.asp).

Answer 2

I agree with Mayo. If you had access to the date time value and wanted to convert it to a string similar to what you have ("Thursday Sep 10"), you could use this.

Answer 3

Keep it simple; you don't really need a proper date parser to compare your dates. I've got the feeling that you're looking for something quick and dirty:

var now = new Date();
var nowHash = now.getMonth() << 5 + now.getDate();

$("h3").each(function (e) {
    var tokens = $(e).html().split(" ");
    var hash = [ "Jan", "Feb", ..., "Dec" ].indexOf(tokens[1]) << 5 + tokens[2];

    if (hash < nowHash) {
        // contract the <ul> that follows
    }
});

Month * 32 (or shift 5 bits to left) + day is enough to give you a unique hash of a date that can be compared with other dates.

Answer 4

Mayo is correct about having no quick way. So here is my take on DIY solution.

Basically you extract the date and compare the date yourself.

var aMonths = { "Jan":0, "Feb":1 ..., "Sep":8, ... };
var aToday  = new Date();

var aH3Text = .....;  //  Get the value via jQuery
var aDataElements = aH3Text.split("");
var aMonthIndex   = aMonths[aDataElements[1]];
var aDateIndex    = aDataElements[2];

var aH3Date = new Date();
aH3Date.setFullYear(2009, aMonthIndex, aDateIndex);

if (aH3Date > today) {
    // BEFORE today
} else {
    // AFTER today
}

Hope this helps.