CODEWITHSUNDEEP
primefaces
Namita
Namita

Reputation: 779

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

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.

Upvotes: 0

Views: 13307

Answers (2)

Duloren
Duloren

Reputation: 2711

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:

enter image description here

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

Upvotes: 1

Akos K
Akos K

Reputation: 7133

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:" />

Upvotes: 1

Related Questions