DateTimeEntry Locale

compared with
Current by Judy Guglielmin
on Sep 17, 2015 16:41.


 
Key
These lines were removed. This word was removed.
These lines were added. This word was added.

View page history


There are 1 changes. View first change.

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

© Copyright 2018 ICEsoft Technologies Canada Corp.