How to display Date and Time value in a p:calender - primefaces

Question

I have an xhtml page
<p:outputPanel>
<p:outputLabel id="temp1"
for="temp11" value="Start Date:" />
<p:calendar id="startDateId"
widgetVar="startDateFromVar" title="#"
showOn="button" disabled="true"/>
</p:outputPanel>
bean
private String date;
/**
* #return the Date
*/
public String getDate() {
date = "11/10/2012 19:15";
return date;
}
/**
* #param Date the Date to set
*/
public void setDate(String ate) {
this.date = date;
}
How to show date in xhtml? I have been adding this line in p:calendar
value=#{bean.date}
but it's not showing the date as well as the calender icon.
Any help would be appreciated.

Answer 1

The value you display with <p:calendar/> should be type of java.util.Date (as kolossus already pointed out). In case if you already have a known string representation of the date, you need to parse that string with java.text.SimpleDateFormat to get a java.util.Date object:
private void parserDate() {
String dateStr = "11/10/2012 19:15";
SimpleDateFormat formatter = new SimpleDateFormat("dd/MM/yyyy HH:mm");
try {
date = formatter.parse(dateStr);
} catch (ParseException ex) {
// handle
}
}
public Date getDate() {
if (date == null)
parserDate();
return date;
}
public void setDate(Date date) {
this.date = date;
}
The display pattern of the calendar element can also be formatted. To display the date with the same formatting as dateStr use the pattern attribute:
<p:calendar id="startDateId" value="#{bean.date}" disabled="true"
widgetVar="startDateFromVar" pattern="dd/MM/yyyy HH:mm"/>
if you use the disabled="true"option on your calendar, use p:inputText instead to display your private String date. Then you can eliminate the additional parsing and formatting:
<p:inputText value="#{bean.date}" disabled="true"/>
pointing to an ID in <p:outputLabel for="..."/> which doesn't exist, results in FacesException. Maybe you wanted:
<p:outputLabel id="temp1" for="startDateId" value="Start Date:" />

Answer 2

Since the StackOverflow just epically revived this question into the homepage, let me try to answer it.
There are lots of problems here. Let's start in the begin:
1) Your date in the bean is not a real date. It is a String! The solution is that easy: change your bean to handle java.util.Date instead of java.lang.String if you want to handle dates.
import java.util.Date;
public class MyDateBean {
private Date date;
public Date getDate() {
return this.date;
}
public void setDate(Date date) {
this.date = date;
}
}
2) If you want just to show the date, use the default outputtext JSF component to do it. Remember to add the converter with the desired format:
<h:outputText value="#{myDateBean.date}" >
<f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
</h:outputText>
By the way, the component you have used:
<p:calendar id="startDateId"
widgetVar="startDateFromVar" title="#"
showOn="button" disabled="true"/>
Is a primefaces calendar component to allow users to pick dates from a calendar panel. If you need it do something like that:
<p:calendar id="startDateId" value="#{myDateBean.date}" pattern="MM/dd/yyyy HH:mm:ss"/>
to obtain:
There are some customisations you can apply. Please refer the Primefaces Demo Page to learn more about the Calendar Primefaces Component: https://www.primefaces.org/showcase/ui/input/calendar.xhtml