Basic and advanced calendar scenarios

The calendar component is used to provide date input with customizable features, such as localization, paging of months, and restriction mechanisms on the date selection.

How to do it…

The simplest component declaration for a basic date selection would be as follows:

<p:calendar value="#{calendarBean.date}" />

This renders an input text that opens a pop-up date selection dialog when clicked, as shown in the following screenshot:

The pop-up visual of the calendar can also be configured to render as an inline visual on the page with the mode attribute, as follows:

<p:calendar value="#{calendarBean.date}" mode="inline" />

The default value of mode is popup. It is also possible to render multiple months side by side on the page with the pages attribute:

<p:calendar value="#{calendarBean.date}" pages="3" 
  mode="inline" />

Paging will start with the month that the given date exists in, and will continue with the number of months specified by the...