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.
The simplest component declaration for a basic date selection would be as follows:
<p:calendar value="#{calendarController.date}" />
This renders an input text that opens up 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="#{calendarController.date}" mode="inline" />
The output of the calendar
component in the inline mode will be as shown in the following screenshot:
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 id="paging" value="#{calendarController.date}" pages="3" mode="inline...