Simon Willison’s Weblog

A better way of entering dates

6th October 2003

The CreativityGoblin dropped in on me today, and as a result I’ve been tackling the challenge of entering dates in to a web application. In the past, I’ve used DHTML calendar widgets for this purpose (my favourite is Mishoo’s highly configurable, standards compliant JS Calendar) but while widgets like this have a great deal of “wow” factor I’m not convinced that they are the best entry mechanism when it comes to raw user speed. Today’s experiment was partially inspired by PHP’s strtotime function, which accepts a string in a wide variety of formats and converts it in to a time.

I wanted the same thing but in Javascript, as interfaces like this are best carried out on the client without needing a round trip to the server to check any entered data. Here’s a demo of what I came up with (javascript code here). It accepts a number of different input formats and converts them to a standardised mm/dd/yyyy (American style dates because it’s for use in an American piece of software) when you move the focus away from the box. Importantly, the date is shown in two places: in the input box itself and in “Mon Oct 06 2003” format as text below the date entry field. This second display serves two purposes. Firstly, by displaying the date in an unambiguous format mistakes are easier to spot (especially important considering the American date format used in the main input). Secondly, it provides a useful place to display error messages should the script fail to parse some input.

The Javascript itself was quite fun to write, and uses a number of interesting idioms I’ve picked up over the past year. It adds a ’filter’ method to Javascript’s Array class to better support functional programming (in fact I use it to match partially entered month and weekday names) and an ’indexOf’ method identical to the one provided by the String class. The majority of the work is done by a data structure called dateParsePatterns, which defines a set of pairs of regular expressions and handler functions. The regular expressions match a n input style and extract any useful information; the handler functions then create a Date object from the extracted information and return it to the caller.

Finally, the code uses an error handling technique I picked up on Ward’s Wiki called the SamuraiPrinciple, which states you should either complete your contract and return a valid result, or throw an exception. This is used by the handlers and the main date parsing function itself, with thrown exceptions only caught by the magicDate function attached directly to the onblur event of the input box.

There are still quite a few improvements that could be made to the code: more input styles (easily added by extending the main data structure), better planned functions and maybe a clean up to move more of the code out of the root Javascript namespace. For the moment though it serves my purpose just fine.

Update: It wasn’t the Creativity Goblin after all—it was the goblin of someone elses half remembered idea. It turns out my friend Andy wrote something very similar to this back in July. Thinking back, I can remember seeing it as well. Despite not being original it’s still a very useful piece of code.