JSF/Primefaces Multilingual calendar

Reading Time: 2 minutes

At work in my current project the customer has delivered their immediate need in the Turkish translation. Our project is multilingual that support English and Turkish. I’ve conducted a research on how to implement a multiple language support on our project, first of all I’ve managed to find Primeface’s prior manual site being hosted on google, there it show the language entries, but no clear sign on implementation.

Then it made me check a few of resources online, and finally I’ve come up with the solution. To explain the dynamics of Primefaces multilingual components is that, English is the default language, for other languages, you need to call a javascript file(s) in your external .js file or in the designated file. In my example I’ve called implemented the js file in the designated file, and return a “tr”/”en” key from the backbean because of the language selection of the users

JSF File

	<ui:define name="body">

		<link
			href="#{facesContext.externalContext.requestContextPath}/css/customMember.css"
			rel="stylesheet" type="text/css" />
		<script type="text/javascript">
			PrimeFaces.locales['tr'] = {
				closeText : 'kapat',
				prevText : 'geri',
				nextText : 'ileri',
				currentText : 'bugün',
				monthNames : [ 'Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs',
						'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim',
						'Kasım', 'Aralık' ],
				monthNamesShort : [ 'Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz',
						'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara' ],
				dayNames : [ 'Pazar', 'Pazartesi', 'Salı', 'Çarşamba',
						'Perşembe', 'Cuma', 'Cumartesi' ],
				dayNamesShort : [ 'Pz', 'Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct' ],
				dayNamesMin : [ 'Pz', 'Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct' ],
				weekHeader : 'Hf',
				firstDay : 1,
				isRTL : false,
				showMonthAfterYear : false,
				yearSuffix : '',
				timeOnlyTitle : 'Zaman Seçiniz',
				timeText : 'Zaman',
				hourText : 'Saat',
				minuteText : 'Dakika',
				secondText : 'Saniye',
				ampm : false,
				month : 'Ay',
				week : 'Hafta',
				day : 'Gün',
				allDayText : 'Tüm Gün'
			};
		</script>

<p:calendar id="birthdate"
									value="#{memberController.order.birthdate}"
									yearRange="c-70:c+10" placeholder="#{msg.member_birthdate}"
									locale="#{memberController.getCalendarLocale()}" pattern="dd/MM/yyyy" mask="true" effect="fold"
									widgetVar="birthdateVar"
									styleClass="#{not component.valid ? 'ui-date-invalid default-input-date' : 'default-input-date'}"
									required="true"
									mindate="#{memberController.getBirthdateBegin()}"
									maxdate="#{memberController.getBirthdateEnd()}"
									navigator="true">
									<f:convertDateTime pattern="dd/MM/yyyy" />
									<f:validator binding="#{birthDateValidator}" />

								</p:calendar>

</ui:define>

Backbean

public String getCalendarLocale() {
		if (sessionInformation.getLanguage().equals(Language.ENGLISH))
			return "en";
		else
			return "tr";
	}

Primefaces language entries

https://code.google.com/archive/p/primefaces/wikis/PrimeFacesLocales.wiki

Primefaces Calendar Showcase

http://www.primefaces.org/showcase/ui/input/calendar.xhtml

Leave a Reply

Your email address will not be published. Required fields are marked *