TypePad Hack: Browser-Localized Date and Time

The dates and times on this weblog now display the dates and times according to the language and timezone settings of the browser, instead of the server, if JavaScript is available and enabled. A Spaniard in Tokyo can see the time adjusted to Asia/Japan, but displayed in Spanish. It’s actually very easy to accomplish, even if it does use an “undocumented” feature of TypePad.

TypePad’s template tags include format specifiers for dates and times, near the bottom of the linked page. The references to January 1, 1970 give it away as being Unix-based; in fact, the format specifiers are also found in the date(1) man page. Some of the specifiers are not found in TypePad’s documentation, but are available nonetheless. The one I am interested in is %s, which gives the number of seconds since the beginning of the Unix epoch, midnight, January 1, 1970 Universal Coordinated Time.

The code behind this is made so much easier by JavaScript’s alignment to this time, but using milliseconds instead of seconds internally. Multiplying the Unix time by 1000 gives the JavaScript time, which can then be displayed by the browser for the local time zone, and in the user’s language.

The normal specifiers given in the TypePad documentation will render the date and time on the TypePad servers, according to the account’s timezone and language settings. If JavaScript is disabled in the browser, this is the fallback.

For example, to show the date and time for a comment, I have this snippet in my individual entry template:

The <noscript> tags show the fallback date (%x) and time (%X) format, which I have set to English in the Eastern time zone (%Z). Those are rendered on the server in the <$MTCommentDate $> tags, but they show in the browser only if JavaScript is turned off.

If JavaScript is enabled, then the magic happens in the <script> tags. The Unix time, in seconds, is passed from the server via <$MTCommentDate format="%s"$>, then passed to a function printEpochToLocale, which I have defined in my custom JavaScript library. Here are the three functions I defined, for printing a date, a time, or both together:

The logic of this code is so simple and obvious, I’m disappointed in myself that I didn’t think of it sooner.

Any TypePad tag involving a date and time, can be re-formatted this way. These tags include:

MTArchiveDate

MTCalendarDay (would need a printEpochToLocaleDay function)

MTCommentDate

MTPageDate

MTEntryModified

MTEntryDate

MTPingDate

MTUserStartDate

Browser compatibility: I developed this using Firefox, part of the Mozilla family, which uses the ISO C notion of locales for time formatting and translation. Basic testing on the Iron browser shows partial support: no language switching, and an unknown time zone causes output in Greenwich Mean Time. I haven’t yet tested with Opera or Microsoft Internet Explorer. Feedback is welcome in the comments.