We build Web & Mobile Applications.

< All Articles

Making a date with JavaScript and JSON

I’ve always enjoyed a kind of love/hate relationship with JavaScript, something which I think stems from my early exposure to using it on Microsoft platforms in the late 90’s, using half-baked debuggers, inconsistent browsers and a huge degree of trial and error. It’s not that I can’t write clever things in JavaScript, just that it’s not my most favourite job: if I can delegate to someone else I usually will!

Last week I was left with no choice but to roll up my sleeves and get coding: I was putting together a financial trading application prototype for one of our new clients and wanted to use JavaScript and JSON to periodically update pricing information.

I decided to stick with the Rails default Prototype library and use script.aculo.us for some snazzy effects. Our trendy UI designer friends up in London have a fondness for MooTools, so we’ve used that on the last couple of projects they’ve worked with us on. I figured it was time to brush up on the latest changes in Prototype as it’s been about 6 months since I last used it.

After a couple of hours I was actually starting to feel better about the whole JavaScript thing: Prototype makes it a lot nicer to work with, the Firebug extension for Firefox is fandabidozi, and Rails makes JSON output trivial. My price information was updating nicely without me getting even slightly stressed. And then it came to the task of showing the date and time of the last price update…

My JSON output included the updated_at date nicely formatted using ISO 8601: “no problem” I naively thought, “I’m sure JS can handle that”. I figured the Date class would parse it and then I could format it appropriately for display on the page. I soon discovered that it couldn’t: the Date class just sat there mocking me, Prototype didn’t come to my aid and my attempt to find any mention in the documentation of how dates in JSON data should be handled ended in failure. My old hatred of all things JavaScript started to return.

And then, just as I was about to give up, a random Google search stumbled upon Datejs. Either I’ve not been reading the right blogs or this library is the best kept secret in the JavaScript world. Behold the simplicity it brings to JSON date handling:

date = Date.parse(json_data.updated_at);

ISO 8601 is just one of the many date formats it can handle, but parsing dates is naturally not all it can do: comparison, validation, addition and subtraction and, perhaps most useful from the presentation point of view, formatting. The core toString method provides a large number of format specifiers, for example:

date.toString("MMMM dd, yyyy HH:mm"); /* September 12, 2008 11:23 */
date.toString("M/d/yyyy");            /* 12-Sep-2008 */

And if that’s not enough the extras library provides a format method that works just like the Ruby or PHP strftime methods.

To get started, take a look at the introductory blog post, download the code (ignore the Alpha 1.0 release as it is out of date), read the documentation and enjoy another step towards completely painless JavaScript development.

Updated on 15 October 2015
First published by Rob Anderton on 13 September 2008
© TheWebFellas Limited 2016
"Making a date with JavaScript and JSON" by Rob Anderton at TheWebFellas is licensed under a Creative Commons Attribution 4.0 International License.