Let us see how we can display a pop-up Calendar component when a button is clicked with the custom date format and navigator features.
To do this, create the <p:calendar> component using the navigator and pattern attributes:
<p:calendar value="#{userController.registeredUser.dob}" showOn="button" navigator="true" pattern="EEE, dd MMM, yyyy"/>We have created a Calendar component and configured it to be displayed when a button icon is clicked on, using the showOn attribute. As we have set navigator="true", year and month drop-down lists are displayed for easy navigation. Also, we have customized the date format to be displayed in the EEE, dd MMM, yyyy format using the pattern attribute. When a date is selected, it will be displayed as Fri, 14 Feb, 2014. This is shown in the following screenshot:
