PrimeFaces User!

s Guide

3.8 Calendar
Calendar is an input component used to select a date featuring display modes, paging, localization, ajax selection and more.

Info
Tag Component Class Component Type Component Family Renderer Type Renderer Class calendar org.primefaces.component.calendar.Calendar org.primefaces.component.Calendar org.primefaces.component org.primefaces.component.CalendarRenderer org.primefaces.component.calendar.CalendarRenderer

Attributes
Name id rendered binding value converter Default null TRUE null null null Type String Boolean Object java.util.Date Converter/ String Description Unique identifier of the component Boolean value to specify the rendering of the component. An el expression that maps to a server side UIComponent instance in a backing bean Value of the component An el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id When set true, process validations logic is executed at apply request values phase for this component.
42

immediate

FALSE

Boolean

Defines how the calendar will be displayed. Message to be displayed when validation fails. readonlyInput showButtonPanel effect effectDuration showOn FALSE FALSE null normal both Boolean Boolean String String String 43 . Client side event that displays the popup calendar. Message to be displayed when conversion fails. Enables month/year navigator String or a java. Sets calendar's minimum visible date Sets calendar's maximum visible date Enables multiple page rendering. Duration of the effect.util. defaults to TimeZone.PrimeFaces User!s Guide Name required validator valueChangeListener requiredMessage converterMessage validatorMessage widgetVar mindate maxdate pages disabled mode pattern locale popupIcon popupIconOnly navigator timeZone Default FALSE null null null null null null null null int FALSE popup MM/dd/ yyyy null null FALSE FALSE null Type Boolean MethodExpr MethodExpr String String String String Date or String Date or String 1 Boolean String String Locale/String String Boolean Boolean TimeZone Description Marks component as required A method expression that refers to a method validationg the input A method expression that refers to a method for handling a valuchangeevent Message to be displayed when required field validation fails. popup icon is rendered without the button. DateFormat pattern for localization Locale to be used for labels and conversion. Icon of the popup button When enabled. Effect to use when displaying and showing the popup calendar.getDefault () Makes input text of a popup calendar readonly. Disables the calendar when set to true. Name of the client side widget.TimeZone instance to specify the timezone used for date conversion. Visibility of button panel containing today and done buttons.

Year range for the navigator. Minute steps. Valid values are LTR and RTL. Minimum boundary for second selection. Client side callback to execute when input element loses focus. Code describing the language used in the generated markup for this component.PrimeFaces User!s Guide Name showWeek disabledWeekends showOtherMonths selectOtherMonths yearRange timeOnly stepHour stepMinute stepSecond minHour maxHour minMinute maxMinute minSecond maxSecond pagedate accesskey alt autocomplete dir Default FALSE FALSE FALSE FALSE null FALSE 1 1 1 0 23 0 59 0 59 null null null null null Type Boolean Boolean Boolean Boolean String Boolean Integer Integer Integer Integer Integer Integer Integer Integer Integer Object String String String String Description Displays the week number next to each week. Maximum number of characters that may be entered in this field. Enables selection of days belonging to other months. Second steps. Alternate textual description of the input field. Minimum boundary for hour selection. Access key that when pressed transfers focus to the input element. Disables weekend columns. Maximum boundary for hour selection. Maximum boundary for second selection. Initial date to display if value is null. Displays days belonging to other months. label lang maxlength onblur null null null null String String Integer String 44 . Hour steps. Minimum boundary for minute selection. Maximum boundary for hour selection. Controls browser autocomplete behavior. default "c-10:c +10" Shows only timepicker without date. A localized user presentable name. Direction indication for text that does not inherit directionality.

Client side callback to execute when a key is pressed down over input element. Client side callback to execute when input element is clicked. Client side callback to execute before displaying a date. Client side callback to execute when a key is released over input element. Client side callback to execute when input element receives focus. Number of characters used to determine the width of the input element. Client side callback to execute when a pointer button is moved away from input element. used to customize date display.PrimeFaces User!s Guide Name onchange Default null Type String Description Client side callback to execute when input element loses focus and its value has been modified since gaining focus. Client side callback to execute when text within input element is selected by user. Client side callback to execute when input element is double clicked. Client side callback to execute when a pointer button is pressed down over input element Client side callback to execute when a pointer button is moved within input element. onclick ondblclick onfocus onkeydown onkeypress onkeyup onmousedown null null null null null null null String String String String String String String onmousemove null String onmouseout null String onmouseover onmouseup onselect readonly size tabindex title beforeShowDay null null null FALSE null null null null String String String Boolean Integer Integer String String 45 . Client side callback to execute when a key is pressed and released over input element. Client side callback to execute when a pointer button is released over input element. Position of the input element in the tabbing order. Flag indicating that this component will prevent changes by the user. Client side callback to execute when a pointer button is moved onto input element. Advisory tooltip informaton.

util.date}" mode="popup" /> 46 .date}"/> public class DateBean { ! ! } private Date date.PrimeFaces User!s Guide Getting Started with Calendar Value of the calendar should be a java. popup (default) and inline. //Getter and Setter Display Modes Calendar has two main display modes.date}" mode="inline" /> Popup <p:calendar value="#{dateBean. <p:calendar value="#{dateBean. Inline <p:calendar value="#{dateBean.Date.

date}" pages="3"/> 47 . • focus: When input field receives focus • button: When popup button is clicked • both: Both focus and button cases Popup Button <p:calendar value="#{dateBean.date}" mode="popup" showOn="button" /> Popup Icon Only <p:calendar value="#{dateBean.date}" mode="popup" ! ! ! showOn="button" popupIconOnly="true" /> Paging Calendar can also be rendered in multiple pages where each page corresponds to one month. <p:calendar value="#{dateController. Valid values are. This feature is tuned with the pages attribute.PrimeFaces User!s Guide showOn option defines the client side event to display the calendar.

date1}" pattern="dd. we suggest adding the code to a javascript file and include in your application.date}" locale="tr" navigator="true" ! ! ! ! ! ! ! showButtonPanel="true"/> To override calculated pattern from locale.primefaces. <h:outputScript name=”path_to_your_translations.util.js” /> <p:calendar value="#{dateController.Locale instance. PrimeFaces Wiki Page for PrimeFacesLocales is a community driven page where you may find the translations you need. Please contribute to this wiki with your own translations.PrimeFaces User!s Guide Localization By default locale information is retrieved from the view’s locale and can be overridden by the locale attribute. http://wiki. yyyy"/> 48 . M. Locale attribute can take a locale key as a String or a java.MM.yyyy"/> <p:calendar value="#{dateController. Default language of labels are English and you need to add the necessary translations to your page manually as PrimeFaces does not include language translations. use the pattern option. d"/> <p:calendar value="#{dateController. Following is a Turkish calendar.date2}" pattern="yy. <p:calendar value="#{dateController. dd MMM.date3}" pattern="EEE.org/display/Components/PrimeFaces+Locales Translation is a simple javascript object.

Values for these attributes can either be a string or a java. <p:calendar value="#{calendarBean.PrimeFaces User!s Guide Effects Various effects can be used when showing and hiding the popup calendar. If you define a method as a listener. Date Ranges Using mindate and maxdate options. keyup and more.date}" mode="inline" ! mindate="07/10/2010" maxdate="07/15/2010"/> 49 .primefaces.date}"> ! <p:ajax event=”dateSelect” listener=”#{bean.handleDateSelect}” update=”msg” /> </p:calendar> <p:messages id="msg" /> public void handleDateSelect(DateSelectEvent event) { ! Date date = event.Date. selectable dates can be restricted. • • • • • • • • • show slideDown fadeIn blind bounce clip drop fold slide Ajax Behavior Events Calendar provides a dateSelect ajax behavior event to execute an instant ajax selection whenever a date is selected. options are. <p:calendar value="#{dateBean. it will be invoked by passing an org.getDate().util.DateSelectEvent instance.event. ! //Add facesmessage } In popup mode. calendar also supports regular ajax behavior events like blur.

date}" mode="inline" navigator="true" /> TimePicker TimePicker functionality is enabled by adding time format to your pattern. The function returns an array with two values.PrimeFaces User!s Guide Navigator Navigator is an easy way to jump between months/years quickly. 50 . <p:calendar value="#{dateBean. <p:calendar value="#{dateBean. first one is flag to indicate if date would be displayed as enabled and second parameter is the optional style class to add to date cell. Following example disabled tuesdays and fridays.date}" pattern=”MM/dd/yyyy HH:mm” /> Advanced Customization Use beforeShowDay javascript callback to customize the look of each date.

Style Class .ui-datepicker-buttonpane Main container Header container Previous month navigator Next month navigator Title Month display Date table Label of weekends Dates belonging to other months Each cell date Button panel 51 Applies .ui-datepicker-header .getDay().ui-datepicker-other-month . Following is the list of structural style classes.ui-datepicker-title .ui-datepicker td .ui-datepicker-table . ''] } Client Side API Widget: PrimeFaces.PrimeFaces User!s Guide <p:calendar value="#{dateBean.ui-datepicker-next .ui-datepicker-prev .ui-datepicker-month .date}" beforeShowDay="tuesdaysAndFridaysOnly" /> function"tuesdaysAndFridaysDisabled(date) { ! var day = date.ui-datepicker-week-end .widget.Calendar Method getDate() setDate(date) disable() enable() Params date: Date to display Return Type Date void void void Description Return selected date Sets display date Disables calendar Enables calendar Skinning Calendar resides in a container element which style and styleClass options apply.ui-datepicker . " ! return [(day != 2 && day != 5).

ui-datepicker-close Today button Close button Applies As skinning style classes are global. 52 .PrimeFaces User!s Guide Style Class . see the main theming section for more information.ui-datepicker-current .