Datepicker in Liferay

[8年前 に Varsha Ajane によって更新されました。]

Hi,

My requirement is like I want an year selection inside the current datepicker that is available on create_account.jsp i.e. registration page.
I searched a lot, but not getting any useful resource as to resolve this issue. As per liferay, this datepicker is implemented that way, but I need to custom it.

Plz suggest.
Thanks in advance.

[8年前 に Richard Sezov によって更新されました。]

The date picker is configured using Model Hints. The linked tutorial shows how to use them in your own applications. To customize the one in that .jsp may require an Ext plugin; I'm not sure if that's something that can be customized with a hook.

[8年前 に Arun Das によって更新されました。]

Hi,
I'm not sure whether AUI Datepicker can do that. Instead why don't you use jQuery Datepicker. You can use hook to implement it.

Arun

[8年前 に Varsha Ajane によって更新されました。]

Hi,

Thanks Richard & Arun.
I have resolved this issued by using JQuery only.
I guess its a liferay bug because,

Firstly liferay allows to set future date on registration page in birthday field as you can see in attached image.
Also after selecting future date in liferay default datepicker on registration page, it throws following exception

17:45:23,868 ERROR [http-/0.0.0.0:8888-12][render_portlet_jsp:132] null
com.liferay.portal.ContactBirthdayException
	at com.liferay.portal.service.impl.UserLocalServiceImpl.getBirthday(UserLocalServiceImpl.java:5598)
	at com.liferay.portal.service.impl.UserLocalServiceImpl.addUserWithWorkflow(UserLocalServiceImpl.java:873)
	at com.liferay.portal.service.UserLocalServiceWrapper.addUserWithWorkflow(UserLocalServiceWrapper.java:1322)
	at com.liferay.portal.kernel.bean.ClassLoaderBeanHandler.invoke(ClassLoaderBeanHandler.java:67)
	at com.liferay.portal.spring.aop.ServiceBeanMethodInvocation.proceed(ServiceBeanMethodInvocation.java:115)
	at com.liferay.portal.spring.transaction.DefaultTransactionExecutor.execute(DefaultTransactionExecutor.java:62)
	at com.liferay.portal.spring.transaction.TransactionInterceptor.invoke(TransactionInterceptor.java:51)
	at com.liferay.portal.spring.aop.ServiceBeanMethodInvocation.proceed(ServiceBeanMethodInvocation.java:111)
	at com.liferay.portal.spring.aop.ServiceBeanAopProxy.invoke(ServiceBeanAopProxy.java:175)
	at com.liferay.portal.service.impl.UserServiceImpl.addUserWithWorkflow(UserServiceImpl.java:532)
	at com.liferay.portal.spring.aop.ServiceBeanMethodInvocation.proceed(ServiceBeanMethodInvocation.java:115)
	at com.liferay.portal.spring.transaction.DefaultTransactionExecutor.execute(DefaultTransactionExecutor.java:62)
	at com.liferay.portal.spring.transaction.TransactionInterceptor.invoke(TransactionInterceptor.java:51)
	at com.liferay.portal.spring.aop.ServiceBeanMethodInvocation.proceed(ServiceBeanMethodInvocation.java:111)
	at com.liferay.portal.spring.aop.ChainableMethodAdvice.invoke(ChainableMethodAdvice.java:56)
	at com.liferay.portal.spring.aop.ServiceBeanMethodInvocation.proceed(ServiceBeanMethodInvocation.java:111)
	at com.liferay.portal.spring.aop.ChainableMethodAdvice.invoke(ChainableMethodAdvice.java:56)
	at com.liferay.portal.spring.aop.ServiceBeanMethodInvocation.proceed(ServiceBeanMethodInvocation.java:111)
	at com.liferay.portal.spring.aop.ServiceBeanAopProxy.invoke(ServiceBeanAopProxy.java:175)
	at com.liferay.portal.service.UserServiceUtil.addUserWithWorkflow(UserServiceUtil.java:385)

Also on control panel "Sign In is temporarily unavailable." error comes.

So to resolve this I have simply replaced the original datepicker with below one

<!-- Custom DatePicker -->
<aui:input type="text" name="dob" label="birthday" id="dob">
	<aui:validator name="required" />
	<aui:validator name="date" />
</aui:input>

<script>
$(function(){
	var minDate = new Date(new Date().getUTCFullYear()-99, new Date().getMonth(), new Date().getDate());
	var maxDate = new Date(new Date().getUTCFullYear(), new Date().getMonth(), new Date().getDate());
	$("#<portlet:namespace/>dob").datepicker({
		dateFormat: 'dd/mm/yy', 
		changeMonth: true,
        changeYear: true,
        yearRange: '-99:+10',
        minDate: minDate,
		maxDate: maxDate,
        gotoCurrent: true
	}).datepicker('<portlet:namespace/>dob',"0");
});
</script>

Here I can set the maxDate to current date. Also I have separate option to navigate through years & months.

Also don't forget to hook the CreateAccountAction.java, where we have to take the date, month & year out of the date that comes from JSP page to complete the action.

// Datepicker updated so update in fetching date, month & year too
		DateFormat df = new SimpleDateFormat("dd/MM/yyyy");
		Date dob = ParamUtil.getDate(actionRequest, "dob", df); 
		
		Calendar cal = Calendar.getInstance();
		cal.setTime(dob);
		
		int birthdayDay = cal.get(Calendar.DATE);
		int birthdayMonth = cal.get(Calendar.MONTH);
		int birthdayYear = cal.get(Calendar.YEAR);