You're reading from PrimeFaces Beginner's Guide The perfect introduction to PrimeFaces, this tutorial will take you step by step through all the great features, ranging from form-creation to sophisticated navigation systems. All you need are some basic JSF and jQuery skills.

Product type Paperback

Published in Nov 2013

Publisher Packt

ISBN-13 9781783280698

Length 378 pages

Edition 1st Edition

Languages

Java

Tools

Primefaces

Concepts

Front End Web Development

Author (1):

K. Siva Prasad Reddy

View More author details

Table of Contents (15) Chapters

Preface

1. Introduction to PrimeFaces FREE CHAPTER

2. Introducing Sample Application TechBuzz

3. Using PrimeFaces Common Utility Components

4. Introducing the PrimeFaces Client Side Validation Framework

5. Introducing Text Input Components

6. Working with Selection Input Components

7. Introducing Advanced Input Components

8. Working with Data Components

9. Introducing Advanced Data Visualization Components

10. Working with Layout Components

11. Introducing Navigation Components

12. Drawing Charts

13. Using PrimeFaces Themes

Index

Time for action – displaying a pop-up Calendar with navigator

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"/>

What just happened?

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: