Skip to content
October 22, 2010 / gus3

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:

<script type="text/javascript"><!--mce:0--></script>

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:

function printEpochToLocale(date) {
document.write(new Date(date*1000).toLocaleString());

function printEpochToLocaleDate(date) {
document.write(new Date(date*1000).toLocaleDateString());

function printEpochToLocaleTime(date) {
document.write(new Date(date*1000).toLocaleTimeString());

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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: