Calendar - Basic
Calendar supports two types of display modes; "inline" or "popup".
Source
<h:form id="form">
<h3>Inline</h3>
<p:calendar value="#{calendarBean.date1}" mode="inline" id="inlineCal"/>
<h3>Popup</h3>
<p:calendar value="#{calendarBean.date2}" id="popupCal" />
<h3>Popup Button</h3>
<p:calendar value="#{calendarBean.date3}" id="popupButtonCal" showOn="button" />
<p:commandButton value="Submit" update="display" oncomplete="dialog.show()" />
<p:dialog header="Selected Dates" widgetVar="dialog"
showEffect="fade" hideEffect="fade">
<h:panelGrid id="display" columns="2" cellpadding="5">
<h:outputText value="Inline Date:" />
<h:outputText value="#{calendarBean.date1}" id="inlineDate">
<f:convertDateTime pattern="d/M/yyyy"/>
</h:outputText>
<h:outputText value="Popup Date:" />
<h:outputText value="#{calendarBean.date2}" id="popupDate">
<f:convertDateTime pattern="d/M/yyyy"/>
</h:outputText>
<h:outputText value="Popup Button Date: " />
<h:outputText value="#{calendarBean.date3}" id="popupButtonDate">
<f:convertDateTime pattern="d/M/yyyy"/>
</h:outputText>
</h:panelGrid>
</p:dialog>
</h:form>
package org.primefaces.examples.view;
import java.util.Date;
import org.primefaces.event.DateSelectEvent;
public class CalendarBean {
private Date date1;
private Date date2;
private Date date3;
public Date getDate1() {
return date1;
}
public void setDate1(Date date1) {
this.date1 = date1;
}
public Date getDate2() {
return date2;
}
public void setDate2(Date date2) {
this.date2 = date2;
}
public Date getDate3() {
return date3;
}
public void setDate3(Date date3) {
this.date3 = date3;
}
}
