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
String
It is an unique identifier of the component.
rendered
Boolean
It takes boolean value to specify the rendering of the
component.
value
java.util.Date
It is used to set value of the component.
converter
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
Date or
String
It is used to set calendar's maximum visible date.
pages
Integer
It enables multiple page rendering.
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
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
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:
It shows message, when we check it as giving below.
Next Topic
PrimeFaces SelectCheckboxMenu
