View Source

h1. DateTimeEntry Locale

{tip}This tutorial approach applies to ICEfaces up to and including 3.3. As of ICEfaces 3.4, the localization approach uses standard Java server-side techniques as demonstrated by the ace:dateTimeEntry -> Locale demo.{tip}

DateTimeEntry provides support for localizing its content to cater for different languages and date formats. The data for each localization is in a JavaScript object contained withing the ice.ace.locales object, keyed by language code. Each localization object should have the following properties:
{code:JavaScript} closeText, prevText, nextText, currentText, monthNames, monthNamesShort, dayNames, dayNamesShort, dayNamesMin, weekHeader, dateFormat, firstDay, isRTL, showMonthAfterYear, yearSuffix
{code}
Each localization object is initialized like this:
{code:JavaScript} <script type="text/javascript">
// French initialization
ice.ace.locales['fr'] = {
closeText: 'Fermer',
prevText: 'Précédent',
nextText: 'Suivant',
currentText: 'Courant',
monthNames: ['janvier','février','mars','avril','mai','juin', 'juillet','août','septembre','octobre','novembre','décembre'],
monthNamesShort: ['janv.','févr.','mars','avr.','mai','juin', 'juil.','août','sept.','oct.','nov.','déc.'],
dayNames: ['dimanche','lundi','mardi','mercredi','jeudi','vendredi','samedi'],
dayNamesShort: ['dim.','lun.','mar.','mer.','jeu.','ven.','sam.'],
dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
weekHeader: 'Sm',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
// Chinese initialization
ice.ace.locales['zh'] = {
closeText: '??',
prevText: '&#x3c;??',
nextText: '??&#x3e;',
currentText: '??',
monthNames: ['??','??','??','??','??','??', '??','??','??','??','???','???'],
monthNamesShort: ['?','?','?','?','?','?', '?','?','?','?','??','??'],
dayNames: ['???','???','???','???','???','???','???'],
dayNamesShort: ['??','??','??','??','??','??','??'],
dayNamesMin: ['?','?','?','?','?','?','?'],
weekHeader: '?',
dateFormat: 'dd-mm-yy',
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: '?'
};
// Spanish initialization
ice.ace.locales['es'] = {
closeText: 'Cerrar',
prevText: 'Previo',
nextText: 'Próximo',
currentText: 'Corriente',
monthNames: ['enero','febrero','marzo','abril','mayo','junio', 'julio','agosto','septiembre','octubre','noviembre','diciembre'],
monthNamesShort: ['ene','feb','mar','abr','may','jun', 'jul','ago','sep','oct','nov','dic'],
dayNames: ['domingo','lunes','martes','miércoles','jueves','viernes','sábado'],
dayNamesShort: ['dom','lun','mar','mié','jue','vie','sáb'],
dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
weekHeader: 'Sm',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
</script>
{code}
Of course, you can also put the inititialization code into a file and include it on the web page. There are some predefined localization files in the jQuery UI svn: [http://jquery-ui.googlecode.com/svn/trunk/|http://jquery-ui.googlecode.com/svn/trunk/]. To set a calendar to a certain locale, use the locale attribute to specify the language code:
{code:xml}<ace:dateTimeEntry locale="fr"/>
<ace:dateTimeEntry locale="zh"/>
<ace:dateTimeEntry locale="es"/>
{code}
The result looks like this:

!dateTimeEntry-locale-tutorial1.jpg!

To include support for the time entry portion of this component, include the following in your js object:-
{code}
ice.ace.locales['fr'] = {
//see above for the calendar object and values the following is only for the timer entry part of the component
currentText: 'Maintenant',
closeText: 'Termine',
amNames: ['AM', 'A'],
pmNames: ['PM', 'P'],
timeFormat: 'HH:mm',
timeSuffix: '',
timeOnlyTitle: 'Choisir le Temps',
timeText: 'Temps',
hourText: 'Heure',
minuteText: 'Minute',
secondText: 'Second',
millisecText: 'Millisecond',
timezoneText: 'Fuseau Horaire',
}
{code}
With the following markup:-
{code}
<ace:dateTimeEntry id="fr1" locale="fr" timeOnly="true" pattern="h:mm:ss a"/>
{code}
would then result in this:-
!timeEntryFR.png!
To help in identifying the correct format of the months and weekdays for a particular Locale, the following code can be used:
{code}
DateFormatSymbols dfsFr = new DateFormatSymbols(new Locale("ES"));
String[] shortMonths = dfsFr.getShortMonths();
String[] longMonths = dfsFr.getMonths();
String[] shortWeekdays = dfsFr.getShortWeekdays();
String[] longWeekdays = dfsFr.getWeekdays();
for (int i = 0, len = shortMonths.length; i < len; ++ i) {
String shortMonth = shortMonths[i];
System.out.println("Short Month: " + shortMonth);
}
for (int i = 0, len = longMonths.length; i < len; ++ i) {
String longMonth = longMonths[i];
System.out.println("Long Month: " + longMonth);
}
for (int i = 0, len = shortWeekdays.length; i < len; ++ i) {
String shortWeekday = shortWeekdays[i];
System.out.println("Short Weekday: " + shortWeekday);
}
for (int i = 0, len = longWeekdays.length; i < len; ++ i) {
String longWeekday = longWeekdays[i];
System.out.println("Long Weekday: " + longWeekday);
}
{code}




h3. {anchor:downloads}Tutorial Source Code Downloads

|| Example || Source || Notes ||
| dateTimeEntry-locale | [dateTimeEntry-locale source code |^dateTimeEntry-locale-tutorial.zip|Download Source Code] | Simple example of how to set up a locale. |