The other new PrimeFaces component we see in this example is <p:calendar> . This
calendar can be used for date input fields. When the user clicks on the icon generated
by this component, a nice calendar widget pops up, where the user can select the
date to enter by pointing and clicking.
The PrimeFaces calendar component is very customizable. By default, it renders as a
text field, and when the user clicks on this text field, the calendar widget pops up. In
our example, we set the showOn attribute to button , this has the effect of rendering
a calendar icon next to the text field, which gives a visual indication that this is a
special field, and also allows users to enter dates manually if they prefer to do so.
By default, the month and year dropdowns are not rendered, this makes it
cumbersome to enter dates that are far in the future or in the past (default day is
always the present date). To get around this, we can set the navigator property to
true like we did in our example.
Additionally, we can control the appearance of the text input field generated by
using the inputStyle or inputStyleClass attributes of <p:calendar> . The
inputStyle attribute value must be a valid inline CSS, where the value of the
inputStyleClass attribute must be the name of a CSS class defined in one of our
CSS stylesheets .