International Date Time Number Formatting
Summary
Add support for internationalization to OpenSocial. The mail thread includes a concrete, shareable implementation for currency, date time, and numeric formatting.
Prototype
Here is a complete example which makes use of the opensocial-i18n feature. It provides two drop-down list where different formats for date/time and number of a given locale could be displayed. For date/time, 12 different formats are supported. For numbers, 4 are supported.
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs> <Require feature="opensocial-i18n"/> </ModulePrefs> <Content type="html"><![CDATA[ <div id="content_div"></div> <script type="text/javascript"> // Get userprefs var prefs = new gadgets.Prefs(); Â function displayGreeting () { // Get current time var today = new Date(); var html = ""; Â var element = document.getElementById('content_div'); Â // Display a greeting based on the myname userpref html += "<br><FONT SIZE=6>" + "<br> Your Country:"+ prefs.getCountry() + "<br> Your language:" + prefs.getLang() + "<br> Date for your locale:" + getDateTime(today) + "<br> Number in your locale:" + getNumber(1234.56) + "<br><br></FONT>"; Â element.innerHTML = html; } Â function getNumber(number) { if (!document.myform.mylist1.selectedIndex) return gadgets.i18n.formatNumber(1, number); else return gadgets.i18n.formatNumber(document.myform.mylist1.selectedIndex + 1, number); } Â function getDateTime(date) { if (!document.myform.mylist2.selectedIndex) return gadgets.i18n.formatDateTime(0, date); else return gadgets.i18n.formatDateTime(document.myform.mylist2.selectedIndex, date); } Â gadgets.util.registerOnLoadHandler(displayGreeting); Â </script> <FORM NAME="myform"> <SELECT NAME="mylist1" onChange="displayGreeting()"> <OPTION VALUE="1">DECIMAL_PATTERN <OPTION VALUE="2">SCIENTIFIC_PATTERN <OPTION VALUE="3">PERCENT_PATTERN <OPTION VALUE="4">CURRENCY_PATTERN </SELECT> <SELECT NAME="mylist2" onChange="displayGreeting()"> <OPTION VALUE="0">FULL_DATE_FORMAT <OPTION VALUE="1">LONG_DATE_FORMAT <OPTION VALUE="2">MEDIUM_DATE_FORMAT <OPTION VALUE="3">SHORT_DATE_FORMAT <OPTION VALUE="4">FULL_TIME_FORMAT <OPTION VALUE="5">LONG_TIME_FORMAT <OPTION VALUE="6">MEDIUM_TIME_FORMAT <OPTION VALUE="7">SHORT_TIME_FORMAT <OPTION VALUE="8">FULL_DATETIME_FORMAT <OPTION VALUE="9">LONG_DATETIME_FORMAT <OPTION VALUE="10">MEDIUM_DATETIME_FORMAT <OPTION VALUE="11">SHORT_DATETIME_FORMAT </SELECT> </FORM> ]]> </Content> </Module>
Here are some screenshot from running the above gadget on my localhost:
Example 1
This example shows a date/time in SHORT_DATETIME_FORMAT, and number in PERCENT_PATTERN for locale en_US.
Example 2
This example shows a date in FULL_DATE_FORMAT, and a number in DECIMAL_PATTERN for locale de_DE.
Example 3
This example shows a time in FULL_TIME_FORMAT, and a number in CURRENCY_PATTERN for locale zh_CN.
Spec Updates
- http://sites.google.com/site/opensocialdraft/Home/gadgets-api-specification/opensocial-javascript-i18n
- http://sites.google.com/site/opensocialdraft/Home/gadgets-api-specification
- http://sites.google.com/site/opensocialdraft/Home/gadgets-api-specification/opensocial-javascript-i18n/formattingjs