DateTimeEntry Locale

Version 33 by Judy Guglielmin
on Sep 17, 2015 16:36.

<< Changes from 32 to 33

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: '<??',
		nextText: '??>',
		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. \|