JavaScript Pretty Date

January 29th, 2008

One method that I've been wanting for quite a while now was a simple way to format old JavaScript dates in a "pretty" way. For example "2008-01-28T20:24:17Z" becomes "2 hours ago". Here's some more examples:

Note that I only care about dates in the past (by far the most common use case) and only dates within the past month (anything beyond a month becomes fuzzy and impractical).

JavaScript Pretty Date

• pretty.js (Also include a .prettyDate() jQuery plugin, for convenience.)
• Demo (Some examples of date conversion using basic DOM manipulation.)

Example Usage

In the following examples I make all the anchors on the site, that have a title with a date in it, have a pretty date as their inner text. Additionally, I continue to update the links every 5 seconds after the page has loaded.

With plain DOM:

With jQuery:

About

There's a variety of these functions around, in various languages, but I wanted one in JavaScript for a couple reasons:

Microformats - Microformats specify a scheme for passing ISO dates to the client (precise date/time value) while providing the user with a "casual" date representation. I wanted to be able to generate a pretty version of the date, from a Microformat, easily and painlessly.

Auto-update - Secondly, I wanted to have these Microformat dates update automatically, as the page remained loaded. This way, if a user left a page open for 15 minutes, and came back, the pretty dates would be silently updated to their current times. This may seem nitpick-y but Twitter fails to do this and it drives me absolutely insane.

Write once, use everywhere - If I wanted to have these dates be constantly updated I would have these options: Only generate these dates on the server - re-querying new results via an Ajax request, generate the results on the server and on the client, or generate the results exclusively on the client. Client makes the most sense as it would result in the least amount of code duplication and general overhead.

I hope this will be useful to some, I know it's helped me out a bunch.

By the way - let's say this piece of code was from a - theoretical - larger project that was attempting to create an easy-to-use, Open Source, Twitter clone - would anyone be interested in using it?

Tags: javascript, jquery, time, dates

54 Comments on 'JavaScript Pretty Date'

Date Extraction

March 28th, 2005

At the last Social Computing Club meeting an interesting idea came up for discussion. We were trying to figure out what the easiest possible way to schedule an event could be. But in order to do so, we needed to figure out where people got their event notifications from, so I've compiled a mini-list.

• Email - A lot of people plan new events by email. Some of these even do it by attaching a new ical event to the email for the recipients to add to their calendar. Attaching an event is the most efficient way for the recipients to manage the event, not necessarily so for the sender. The proposed solution, by Jon Schull, was to simply forward the email that you received with a subject line of "Tomorrow at 8, Meeting with Fred" (for example)to a specified email box. This will automatically update your calendar with this event and attach the email as data. This is would be very easy.
• Instant Messenger - I, personally, plan a lot of events through AIM. Similar to the email solution, one could simply forward a new event to an AIM bot. An issue with this, however, lies in the fact that you don't have the prior conversation automatically attached to the event (for context).
• Web Sites - Browsing around web sites and spotting a new event (such as 'FooBar Concert, 8pm, July 1, 2005') is the final location, that I can think of, where an event would exist. To test this theory, I wrote a quick GreaseMonkey hack which parses through some selected text, looks for something representing a date, and returns the date in a properly-formatted time (you can check it out here). Note: It doesn't actually do anything yet, but hopefully will soon. It currently only supports phrases like 'tomorrow', 'yesterday', 'evening', and 'morning' - which are much much easier to find then all the possible date formats.

In all, it's an intriguing problem: Constructing some form of an interface through which users can most easily maintain their calendar. At least one feature that I would find to be intriguing would be if someone says to you "Are you available tomorrow evening?" your calendar application would be able to tell you what time to meet would be best. and maybe even what location? Anyway, it's all just a bunch of speculation right now, but the Lab for Social Computing is going to try hacking on it and see if they can take it somewhere. I'll be interested to see what the results look like.

Tags: date, event, greasemonkey, planning, schedule, time

Comment on 'Date Extraction'