DateTimeEntry Locale

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.

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:

 closeText, prevText, nextText, currentText, monthNames, monthNamesShort, dayNames, dayNamesShort, dayNamesMin, weekHeader, dateFormat, firstDay, isRTL, showMonthAfterYear, yearSuffix

Each localization object is initialized like this:

         <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>

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/. To set a calendar to a certain locale, use the locale attribute to specify the language code:

<ace:dateTimeEntry locale="fr"/>
<ace:dateTimeEntry locale="zh"/>
<ace:dateTimeEntry locale="es"/>

The result looks like this:

To include support for the time entry portion of this component, include the following in your js object:-

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',
}

With the following markup:-

<ace:dateTimeEntry id="fr1" locale="fr" timeOnly="true" pattern="h:mm:ss a"/>

would then result in this:-

To help in identifying the correct format of the months and weekdays for a particular Locale, the following code can be used:

        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);
        }

Tutorial Source Code Downloads

Example	Source	Notes
dateTimeEntry-locale	dateTimeEntry-locale source code	Simple example of how to set up a locale.

DateTimeEntry Locale

DateTimeEntry Locale

Tutorial Source Code Downloads

Labels