PrimeFaces Calender

It is an input component which is used to select date. The <p:calendar> component is used to create a calendar in JSF application. It includes various features like: display modes, paging, localization, ajax selection etc.

Value of the calendar should be a java.util.Date.

Calendar Attributes

The following table contains attributes for the Calendar component.

Attribute	Default value	Return type	Description
id	null	String	It is an unique identifier of the component.
rendered	true	Boolean	It takes boolean value to specify the rendering of the component.
value	null	java.util.Date	It is used to set value of the component.
converter	null	Converter/String	It takes an expression or a literal text that defines a converter for the component.
required	false	Boolean	It is used to make component as required.
mindate	false	Date or String	It is used to set calendar's minimum visible date.
maxdate	null	Date or String	It is used to set calendar's maximum visible date.
pages	1	Integer	It enables multiple page rendering.
mode	popup	String	It is used to define how the calendar will be displayed.
pattern	MM/dd/yyyy	String	It is used to set DateFormat pattern for localization.
timeZone	null	Time Zone	It is used to specify the timezone used for date conversion.
showWeek	false	Boolean	It is used to display the week number next to each week.
disabledWeekends	false	Boolean	It disables weekend columns.
showOtherMonths	false	Boolean	It displays days belonging to other months.
selectOtherMonths	false	Boolean	It enables selection of days belonging to other months.
yearRange	null	String	It is used to set year range.
timeOnly	false	Boolean	It shows only timepicker without date.

Skinning

The following table contains structural style classes.

Style Class	Applies
.ui-datepicker	It is used for main container.
.ui-datepicker-header	It is used for header container.
.ui-datepicker-prev	It is used for previous month navigator.
.ui-datepicker-next	It is used for next month navigator.
.ui-datepicker-title	It is used for title.
.ui-datepicker-month	It is used for month display.
.ui-datepicker-table	It is used for date table.
.ui-datepicker-week-end	This class is used for label of weekends.
.ui-datepicker-other-month	Class for dates belonging to other months.
.ui-datepicker td	It is used for each cell date.
.ui-datepicker-buttonpane	This is button panel class.
.ui-datepicker-current	This class is used for today button.
.ui-datepicker-close	It is used to display close button.

Example

Here, in the following example, we are implementing <p:calendar> component. This example contains the following files.

JSF File

// calendar.xhtml

<?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:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Calendar Example</title>
</h:head>
<h:body>
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel for="inline" value="Select Date" />
<p:calendar id="inline" value="#{calendar.date}" mode="popup" />
</h:panelGrid>
</h:body>
</html>

ManagedBean

// Calendar.java

package com.javatpoint;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
import org.primefaces.context.RequestContext;
import org.primefaces.event.SelectEvent;
@ManagedBean
public class Calendar {
private Date date;
public void onDateSelect(SelectEvent event) {
FacesContext facesContext = FacesContext.getCurrentInstance();
SimpleDateFormat format = new SimpleDateFormat("dd/MM/yyyy");
facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Date Selected", format.format(event.getObject())));
}
public void click() {
RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.update("form:display");
requestContext.execute("PF('dlg').show()");
}
public Date getDate() {
return date;
}
public void setDate(Date date) {
this.date = date;
}
}

After running JSF file, it produces the following output.

Output: