PrimeFaces Calendar Component

Every JSF component library provides some sort of a date picker component and PrimeFaces is no exception. In fact, PrimeFaces calendar component is based on the well known YUI calendar widget which is equipped with some unique features. Calendar is purely javascript and does not do unnecessary ajax callbacks so it’s fast and furious.

Calendar has the mode attribute to specify how the datepicker is presented, current modes as of 0.8.3 are “inline” and “popup”.

Inline Calendar

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

Popup Calendar

<p:calendar value="#{bean.date}" mode="popup" />

Multiple Date Selection

By default, calendar allows you to select one date only, if you want to select multiple dates,
set multiple to true. Selected dates will be passed to the JSF backing beans as a Date array.

<p:calendar value="#{bean.dateArray}" mode="inline" selection="multiple"/>

Multiple Pages

If you want to display calendar in multiple pages, specify the number of pages(months).

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

Localization

Pattern attribute is used to specify which date pattern calendar will use.

<p:calendar value="#{bean.date}" pattern="dd.MM.yyyy"/>

Multi Language

Currently 9 languages are supported out of the box, English, Turkish, Catalan (BARCA), Portuguese, Italian, French, Spanish, German and Japanese. Please provide a patch and help us add more languages. (See PrimeFaces.widget.CalendarUtils.applyLocale javascript object to get more info.)

<p:calendar value="#{bean.date}" language="ja"/>

Navigator

In order to jump to a month or year easily, use the navigator option.

<p:calendar value="#{bean.date}" navigator="true"/>

Skinning
Using well defined CSS selectors, calendar is easy to skin as well.

Online Demo

Head over to the online demo of PrimeFaces to see calendar in action.