Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Localize dates on a browser?

Let's say I have a date that I can represent in a culture-invariant format (ISO 8601).

I'll pick July 6, 2009, 3:54 pm UTC time in Paris, a.k.a. 5:54 pm local time in Paris observing daylight savings.

2009-07-06T15:54:12.000+02:00

OK... is there any hidden gem of markup that will tell the browser to convert that string into a localized version of it?

The closest solution is using Javascript's Date.prototype.toLocaleString(). It certainly does a good job, but it can be slow to iterate over a lot of dates, and it relies on Javascript.

Is there any HTML, CSS, XSLT, or otherwise semantic markup that a browser will recognize and automatically render the correct localized string?

Edit:

The method I am currently using is replacing the text of an HTML element with a localized string:

Starting with:

<span class="date">2009/07/06 15:54:12 GMT</span>

Using Javascript (with jQuery):

var dates = $("span.date", context);
// use for loop instead of .each() for speed
for(var i=0,len=dates.length; i < len; i++) {
    // parse the date
    var d = new Date(dates.eq(i).text());
    // set the text to the localized string
    dates.eq(i).text(d.toLocaleString());
}

From a practical point of view, it makes the text "flash" to the new value when the Javascript runs, and I don't like it.

From a principles point of view, I don't get why we need to do this - the browser should be able to localize standard things like currency, dates, numbers, as long as we mark it up as such.


A follow up question: Why do browsers/the Web not have such a simple feature - take a standard data item, and format it according to the client's settings?

like image 534
Jeff Meatball Yang Avatar asked Jul 06 '09 19:07

Jeff Meatball Yang


2 Answers

I use toLocaleString() on my site, and I've never had a problem with the speed of it. How are you getting the server date into the Date object? Parsing?

I add a comment node right before I display the date as the server sees it. Inside the comment node is the date/time of that post as the number of milliseconds since epoch. In Rails, for example:

<!--<%= post.created_at.to_i * 1000 %>-->

If they have JS enabled, I use jQuery to grab those nodes, get the value of the comment, then:

var date = new Date();
date.setTime(msFromEpoch);
// output date.toLocaleString()

If they don't have JS enabled, they can feel free to do the conversion in their head.

If you're trying to parse the ISO time, that may be the cause of your slowness. Also, how many dates are we talking?

like image 178
Chris Doggett Avatar answered Nov 16 '22 18:11

Chris Doggett


Unfortunately, there is not.

HTML & CSS are strictly used for presentation, as such, there is no "smarts" built in to change the way things are displayed.

Your best bet would be to use a server side language (like .NET, Python, etc.) to emit the dates into the HTML in the format you want them shown to your user.

like image 2
nikmd23 Avatar answered Nov 16 '22 18:11

nikmd23