A small jquery+iso+timezone+browser recipe

So, on my current project (Flexvite), I wanted dates and times to adjust themselves to the browser's timezone on-the-fly throughout our site and without any extra steps for the user (like setting a timezone on their account). HTTP posts will include a datetime with a timezone that you could parse out, but I wanted it for HTTP gets also, and without having to do any hidden frame or secret post or redirect tricks.

Perhaps some jquery guru will tell me this is horribly non-performant, but for now it works and meets our need so I sharing it here.

Here's the basic recipe:

Step 1: Go grab these excellent 2 libraries for javascript iso8601/rfc3339 datetime parsing and javascript date formatting. Include them in your page.

Step 2: When serving up your page, wherever you want a date or time localized to the user's timezone, create a div structured like this:

<span class="dateToLocalize">
 <span class="dateIsoDate" style="display:none">2009-09-18T11:30:00-05:00</span>
 <span class="dateFormat" style="display:none">h:MM tt</span>
 <span class="date">11:30 am</span>
</span>

// Notice that it includes a hidden copy of the datetime in iso8601/rfc3339 format, as well as

// parameters to pass to the client-side datetime formatting function

Step 3: Use some jquery magic to find these structured div's on the client side, and adjust to the user's local (browser) timezone if necessary:

$('.dateToLocalize > .date').each(
 function() {
     d = new Date().setISO8601($(this).parent().find('.dateIsoDate').text());
     format = $(this).parent().find('.dateFormat').text();
     formattedDateHtml = d.format(format);
     $(this).html(formattedDateHtml);
 }
);

Step 4: Just run that function when your page loads and every date/time in the page (that is layed out with the aforementioned structure) will be automatically localized to the browser's timezone. sweeeet.