JavaScript

Simple Date and Time Localization With JavaScript

    Paul Annesley
    Share

    One of the many challenges we’ve encountered during our work on SitePoint Contests and Marketplace is deciding the best way to present dates and times to our users.

    This sounds simple, but there’s quite a few considerations that we need to keep in mind.

    Easily Readable by Humans

    “Started 2 hours ago” and “Ends in 2 days” are much easier to understand than “Started Mon, 4 June 2007, 10:04am +1000” and “Ends Wed, 6 June 2007, 9:28am +1000”.

    Cachable by Search Engines

    “Started 2 hours ago” or “Ends in 2 days” are meaningless when looking at a snippet or full copy of a page cached by a search engine 2 days ago. Likewise, “Started Mon, 4 June 2007, 10:04am +1000” is difficult to understand for a person in a completely different time zone.

    Cachable for Performance

    We like to be able to allocate cache lifetimes to as many parts of our pages as possible. The text “Started Mon, 4 June 2007, 10:04am +1000” needs no cache expiry, while “Started less than a minute ago” could only be reliably cached for 1 second.

    Local Time

    While most people can figure out what “Started Mon, 4 June 2007, 10:04am GMT” means in their local time zone, it would be most valuable if we could do the sums for them, so they don’t need to spend 30 seconds figuring out that the auction ended… 1 second ago.

    Stale Pages

    Because life wasn’t complicated enough already, tabbed browsing was invented so that we can force even more input into our heads at once. Tabs also makes it easy to get side tracked for hours before coming back to that SitePoint Marketplace listing. But currently there’s no way of knowing that the auction which says “Ends in 28 minutes” is actually long gone.

    A Micro Solution

    To solve all these problems in one fell swoop, we’ve created a very simple in-house microformat and some clever JavaScript. Together, they let us present dates and times in a way which is useful, meaningful and accessible to all users.

    We start with some basic HTML markup:


    <span class="sitepoint-datetime">Mon, 28 May 2007 01:30:49 GMT</span>

    This will be seen by users without JavaScript, and some users of assistive technology. It may not be as pretty as “7 days ago”, but it’s the most correct, meaningful and cachable format when we don’t know how, when or where the page is actually being viewed. We’ve prefixed the class name with “sitepoint-” to make it clear that this is not a standard microformat.

    We’ve used RFC 2822 formatting for the date/time, which is easily read by humans, and can also be passed straight into the constructor of a JavaScript Date object.

    Our JavaScript finds all instances of this microformat, and converts them to the users local time, displaying it in a friendly format without an ugly time zone identifier hanging off the end.

    We can then add additional information to the class attribute of the span. The JavaScript code uses these to decide the best way to display the information. For example, with an extra class of “endtime”, the JavaScript will convert the time to a countdown, displaying it in a format like “1 day, 3 hours”. The time remaining is recalculated every 30 seconds, so there’s no more stale information on left-open browser tabs. The script will even visually mark contests and auctions as having ended once the countdown reaches zero.

    We’re looking forward to getting these and many other enhancements online over at the Design Contests and Marketplace.

    In the mean time, I’m sure there’s many views out there regarding such use of microformats and JavaScript, and even whether the term “microformats” is applicable to this markup pattern. Please, bring them on.