120
PrimeFaces Calender
It is an input component which is used to select date. The <p:calendar> component is used to create a calendar in JSF application. It includes various features like: display modes, paging, localization, ajax selection etc.
Value of the calendar should be a java.util.Date.
Calendar Attributes
The following table contains attributes for the Calendar component.
| Attribute | Default value | Return type | Description |
|---|---|---|---|
| id | null | String | It is an unique identifier of the component. |
| rendered | true | Boolean | It takes boolean value to specify the rendering of the component. |
| value | null | java.util.Date | It is used to set value of the component. |
| converter | null | Converter/String | It takes an expression or a literal text that defines a converter for the component. |
| required | false | Boolean | It is used to make component as required. |
| mindate | false | Date or String | It is used to set calendar’s minimum visible date. |
| maxdate | null | Date or String | It is used to set calendar’s maximum visible date. |
| pages | 1 | Integer | It enables multiple page rendering. |
| mode | popup | String | It is used to define how the calendar will be displayed. |
| pattern | MM/dd/yyyy | String | It is used to set DateFormat pattern for localization. |
| timeZone | null | Time Zone | It is used to specify the timezone used for date conversion. |
| showWeek | false | Boolean | It is used to display the week number next to each week. |
| disabledWeekends | false | Boolean | It disables weekend columns. |
| showOtherMonths | false | Boolean | It displays days belonging to other months. |
| selectOtherMonths | false | Boolean | It enables selection of days belonging to other months. |
| yearRange | null | String | It is used to set year range. |
| timeOnly | false | Boolean | It shows only timepicker without date. |
Skinning
The following table contains structural style classes.
| Style Class | Applies |
|---|---|
| .ui-datepicker | It is used for main container. |
| .ui-datepicker-header | It is used for header container. |
| .ui-datepicker-prev | It is used for previous month navigator. |
| .ui-datepicker-next | It is used for next month navigator. |
| .ui-datepicker-title | It is used for title. |
| .ui-datepicker-month | It is used for month display. |
| .ui-datepicker-table | It is used for date table. |
| .ui-datepicker-week-end | This class is used for label of weekends. |
| .ui-datepicker-other-month | Class for dates belonging to other months. |
| .ui-datepicker td | It is used for each cell date. |
| .ui-datepicker-buttonpane | This is button panel class. |
| .ui-datepicker-current | This class is used for today button. |
| .ui-datepicker-close | It is used to display close button. |
Example
Here, in the following example, we are implementing <p:calendar> component. This example contains the following files.
JSF File
// calendar.xhtml
ManagedBean
// Calendar.java
After running JSF file, it produces the following output.
Output:
It shows message, when we check it as giving below.
Next TopicPrimeFaces SelectCheckboxMenu