This question is mainly directed at the PrimeFaces dev team but maybe someone else knows a workaround. I can’t upload screenshots on the PrimeFaces support forums but I can link to my question here.
Reported as a defect in PrimeFaces issue tracker. Add a star to cast your vote for the PrimeFaces development team to fix this: link to defect in their issue tracker
Discussed here in PrimeFaces support forum.
Still exists in PrimeFaces 3.0-M3-SNAPSHOT
PROBLEM:
I’m using the PrimeFaces 3.0 <p:calendar> control to allow the user to view and edit Date objects that contain both date and time. There appears to be some defect in the JavaScript control that causes it to add some strange offset to the date somewhere in the vicinity of +6 years.
I have setup some code to demonstrate the problem.
In the first <p:calendar> I use a managed bean Date that is initially null. The control is ok with that. It will open and set the initial value to the current date with hour/minute/second zeroed. I can use the sliders to set the hours, minutes and seconds normally.
In the second <p:calendar> I use a managed bean Date that is initially set to new Date(). This will create a new Date object set to the current server time. The control is not ok with that. Although the date/time displayed in the <p:calendar> box looks correct initially, it will be modified to some bizarre value in the future when the JavaScript picker control is opened. On closing the picker control the date on the managed bean is set to the bizarre value.
Another problem that may or may not be related is when I try to use a custom format for the date:
ddHHmm’Z’MMMyy
This format is used by my customer in their domain and I need to support it somehow. The <p:calendar> JavaScript picker will not even open when I try to click on the box. Something about the pattern (which works just fine in Java SimpleDateFormat) breaks it. The PrimeFaces documentation is silent on this.
QUESTION: Does anyone have any workaround for these <p:calendar> issues?
UPDATE – source code:
The composite component that wraps the <p:calendar>:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface
displayName="calendar"
shortDescription="Wrapper for a PrimeFaces p:calendar">
<composite:attribute
name="dateValue"
displayName="dateValue"
type="java.util.Date"
required="true"
shortDescription="EL expression that evaluates to a java.util.Date on a backing bean" />
<composite:attribute
name="pattern"
displayName="pattern"
type="java.lang.String"
default="dd/MM/yyyy HH:mm:ss"
shortDescription="Pattern used to format the underlying Date value. See SimpleDatePattern class documentation for pattern syntax. NOTE: p:calendar does not appear to support some complex patterns." />
<composite:attribute
name="ajaxRenderTargets"
displayName="ajaxRenderTargets"
type="java.lang.String"
default="@none"
shortDescription="Space-separated list of element ids that need to be rendered by Ajax when the calendar value changes. See f:ajax render attribute documentation." />
<composite:attribute
name="tooltip"
displayName="tooltip"
type="java.lang.String"
default=""
shortDescription="String to be used as the tooltip for this component" />
<composite:attribute
name="label"
displayName="label"
type="java.lang.String"
default=""
shortDescription="Label for this component. May be used in FacesMessages." />
<composite:attribute
name="required"
displayName="required"
type="java.lang.Boolean"
default="false" />
</composite:interface>
<composite:implementation>
<p:calendar
id="pCalendarInsideCC"
value="#{cc.attrs.dateValue}"
pattern="#{cc.attrs.pattern}"
readOnlyInputText="true"
showButtonPanel="false"
popupIconOnly="false"
showOn="focus"
mode="popup"
navigator="true"
pages="1"
showOtherMonths="true"
selectOtherMonths="false"
alt="#{cc.attrs.tooltip}"
title="#{cc.attrs.tooltip}"
required="#{cc.attrs.required}"
label="#{cc.attrs.label}">
<p:ajax
event="valueChange"
update="#{cc.attrs.ajaxRenderTargets}" />
<p:ajax
event="change"
update="#{cc.attrs.ajaxRenderTargets}" />
</p:calendar>
</composite:implementation>
</html>
The page containing the composite component references:
<ui:composition template="/templates/primefaces/masterLayout.xhtml">
<ui:param name="title" value="#{bundle.primeFacesCalendarCC_description}" />
<ui:define name="content">
<h:form id="contentForm">
<h:panelGrid columns="3">
<h:outputText
value="Initially empty Date reference on managed bean" />
<sandbox:primeFacesCalendar
id="calendarCC1"
dateValue="#{primeFacesTestBean.userSubmittedDateTime}"
ajaxRenderTargets="messagesCalendar1 :ajaxRenderTargetsInTemplate"
required="true" />
<p:messages
id="messagesCalendar1"
showSummary="false"
showDetail="true" />
<h:outputText
value="A 'new Date()' reference on managed bean" />
<sandbox:primeFacesCalendar
id="calendarCC2"
dateValue="#{primeFacesTestBean.newDateInstance}"
ajaxRenderTargets="messagesCalendar2 :ajaxRenderTargetsInTemplate"
required="true" />
<p:messages
id="messagesCalendar2"
showSummary="false"
showDetail="true" />
<h:outputText
value="Initially empty Date using ddHHmm'Z'MMMyy pattern" />
<sandbox:primeFacesCalendar
id="calendarCC3"
dateValue="#{primeFacesTestBean.userSubmittedDateTime}"
ajaxRenderTargets="messagesCalendar2 :ajaxRenderTargetsInTemplate"
pattern="ddHHmm'Z'MMMyy"
required="true" />
<p:messages
id="messagesCalendar3"
showSummary="false"
showDetail="true" />
</h:panelGrid>
</h:form>
</ui:define>
</ui:composition>
<ui:composition template="/templates/primefaces/masterLayout.xhtml">
<ui:param name="title" value="#{bundle.primeFacesCalendarCC_description}" />
<ui:define name="content">
<h:form id="contentForm">
<h:panelGrid columns="3">
<h:outputText
value="Initially empty Date reference on managed bean" />
<sandbox:primeFacesCalendar
id="calendarCC1"
dateValue="#{primeFacesTestBean.userSubmittedDateTime}"
ajaxRenderTargets="messagesCalendar1 :ajaxRenderTargetsInTemplate"
required="true" />
<p:messages
id="messagesCalendar1"
showSummary="false"
showDetail="true" />
<h:outputText
value="A 'new Date()' reference on managed bean" />
<sandbox:primeFacesCalendar
id="calendarCC2"
dateValue="#{primeFacesTestBean.newDateInstance}"
ajaxRenderTargets="messagesCalendar2 :ajaxRenderTargetsInTemplate"
required="true" />
<p:messages
id="messagesCalendar2"
showSummary="false"
showDetail="true" />
<h:outputText
value="Initially empty Date using ddHHmm'Z'MMMyy pattern" />
<sandbox:primeFacesCalendar
id="calendarCC3"
dateValue="#{primeFacesTestBean.userSubmittedDateTime}"
ajaxRenderTargets="messagesCalendar2 :ajaxRenderTargetsInTemplate"
pattern="ddHHmm'Z'MMMyy"
required="true" />
<p:messages
id="messagesCalendar3"
showSummary="false"
showDetail="true" />
</h:panelGrid>
</h:form>
</ui:define>
</ui:composition>
The managed bean:
@ManagedBean(name="primeFacesTestBean")
@SessionScoped
public class PrimeFacesTestBean implements Serializable {
private static final long serialVersionUID = 1L;
private Date userSubmittedDateTime = null;
private Date newDateInstance = new Date();
public void setUserSubmittedDateTime(Date userSubmittedDateTime) {
this.userSubmittedDateTime = userSubmittedDateTime;
}
public Date getUserSubmittedDateTime() {
return userSubmittedDateTime;
}
public void setNewDateInstance(Date newDateInstance) {
this.newDateInstance = newDateInstance;
}
public Date getNewDateInstance() {
return newDateInstance;
}
public void calendarValueChangeHandler(AjaxBehaviorEvent event) {
//System.out.println("calendar value has been changed (Ajaxified)");
}
}
Fixed as of August 18th in 3.0-M3-SNAPSHOT:
http://code.google.com/p/primefaces/issues/detail?id=2215
Confirmed that it works correctly in my webapp using the 3.0-M3-SNAPSHOT of August 23rd.
NOTE: The custom format issue was not covered in this defect. I’m not sure if that is fixed or still a problem.