Jeff’s posterous

Date Formatting with YUI – Part IV

In Part I of this series, we introduced date formatting with the YUI Date utility and integrated it with the DataTable control in Part II and the Charts control in Part III. In this final part, we’ll look at date localisation with YUI.

To recap, we can format dates using YUI using the YAHOO.util.Date class, which is currently distributed as part of the DataSource utility. Any valid strftime format specifier is supported, so for example, YAHOO.util.Date.format(new Date(), { format: "%Y-%b-%d"}); would return the date as <four digit year>-<short month name>-<two digit day of month>.

The Date utility accepts an optional third parameter, which specifies the locale to use when formatting a date. If not specified, this defaults to "en". The locale is a string that may be the two-letter ISO-639-1 language code, optionally followed by a hyphen and a two-letter ISO-3166-1 country code. For example, fr is used for French, while fr-CA is used for the dialect of French spoken in Canada, and fr-CH is used for the dialect of French spoken in Switzerland. de-CH, on the other hand, is the dialect of German spoken in Switzerland.

The locale code impacts only the following format specifiers:

Built-in locales

Let’s start off by looking at the built-in locales. The Date utility includes the following locales by default:

• en – English (the default)
• en-US – US English
• en-GB – British English
• en-AU – Australian English (identical to British English)

In the following example, we’ll print out the locale-specific date format using the built-in locales:

 var d = new Date(); var f = { format: "%x%n" }; var s = "%x:\n"; s += " Default:\t" + YAHOO.util.Date.format(d, f); s += " en-US:\t" + YAHOO.util.Date.format(d, f, "en-US"); s += " en-GB:\t" + YAHOO.util.Date.format(d, f, "en-GB"); alert(s); 

See a working example. Note the different output for en-US and en-GB. Similar differences between these two locales can be seen for %r, %c, and %X.

Supporting other languages

Now, there are many languages other than English, and many web applications that cater to speakers of these languages which the date formatter should support. While these aren’t provided by YUI itself, it is fairly easy to add your own locale patch. Let’s create one now for French. We do this by mixing in the YAHOO.util.DateLocale class with our locale definitions using the YAHOO.lang.merge method:

 YAHOO.util.DateLocale["fr"] = YAHOO.lang.merge(YAHOO.util.DateLocale, { 	a: ["dim", "lun", "mar", "mer", "jeu", "ven", "sam"], 	A: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"], 	b: ["jan", "fév", "mar", "avr", "mai", "jun", "jui", "aoû", "sep", "oct", "nov", "déc"], 	B: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"], 	c: "%a %d %b %Y %T %Z", 	p: ["", ""], 	P: ["", ""], 	x: "%d.%m.%Y", 	X: "%T" }); var d = new Date(); var f = { format: "%c%n" }; var s = "%c:\n"; s += " Default:\t" + YAHOO.util.Date.format(d, f); s += " fr: \t" + YAHOO.util.Date.format(d, f, "fr"); alert(s); 

Try it out.

Similarly, we can create one for Canadian French by using the French locale as a base. The only difference is in the locale-specific date format %x:

 YAHOO.util.DateLocale["fr-CA"] = YAHOO.lang.merge(YAHOO.util.DateLocale["fr"], { 	x: "%Y-%m-%d" }); var d = new Date(); var f = { format: "%A, %x%n" }; var s = "%A, %x:\n"; s += " Default:\t" + YAHOO.util.Date.format(d, f); s += " fr: \t" + YAHOO.util.Date.format(d, f, "fr"); s += " fr-CA:\t" + YAHOO.util.Date.format(d, f, "fr-CA"); s += " fr-CH:\t" + YAHOO.util.Date.format(d, f, "fr-CH"); s += " de-CH:\t" + YAHOO.util.Date.format(d, f, "de-CH"); alert(s); 

Try it out.

Notice that we also try to access fr-CH and de-CH which haven’t been defined. In this case, the Date utility falls back to a less specific locale and tries fr and de instead. Since de hasn’t been defined either, it falls back to en, which is built in.

I’ve included definitions for a few locales as examples. If you’d like to use these locales, it may make more sense to just include the code directly in your HTML pages, or copy the files to your own servers.

• fr – French, Canadian French and Swiss French
• de – German, and Swiss German
• hi – Hindi
• ko – Korean