| Use the ui:calendar when the user needs to select a
date. The calendar component displays a text field that expects a
date as input, together with an icon that when clicked displays a
small calendar. The user can either type directly into the
textfield or select a date from the calendar display.
HTML Elements and Layout
The component renders several elements: an optional
<label>, an <input type="text">
and an <img> element for the icon. They are laid
out inside a HTML <table>. The pop-up
calendar is a complex component also laid out using a HTML
<table>. It has child components corresponding to
<ui:dropDown> and
<ui:iconHyperlink> (please see these for details)
and anchors <a> to represent the dates and the
"close" button.
Configuring the ui:calendar tag
Use the selectedDate attribute to associate the
component with a model object that represents the current value, by
setting the attribute's value to an EL expression that corresponds to
a property of a backing bean.
By default, the component accepts dates between the current date
and four years out. The years shown in the popup calendar reflect
this range. If a date outside of the range is entered into the
textfield, the component indicates a validation error. To specify
a different range of date, use the minDate and
maxDate attributes.
To optionally specify a label for the component, use the
label attribute, or specify a label facet.
Facets
label: use this facet to specify a custom
component for the label.readOnly: use this facet to specify a custom
component for displaying the value of this component when it is marked as readonly. The default is a ui:staticText.
Client-side JavaScript functions
In all the functions below, <id> should be
the generated id of the TextField component.
[JSOBJECT_NAME]_setDisabled(<id>, <disabled>)
|
Enable/disable the field. Set <disabled>
to true to disable the component, or false to enable it.
|
component_setVisible(<id>)
|
Hide or show this component.
|
Examples
Example 1: Basic Popup Calendar
The component gets the options from a managed bean called
CalendarBean. The value of the component
selectedDate is bound to a property of the managed
bean. A label for the component as a whole (label) is
shown next to the component.
This example shows how to create a simple calendar.
<ui:calendar id="startDate"
selectedDate="#{CalendarBean.startDate}"
label="Start Date: " />
Code for the managed bean:
CalendarBean.java
import java.io.Serializable;
import java.util.Date;
import java.util.Calendar;
import javax.faces.event.ValueChangeEvent;
public class CalendarBean {
public CalendarBean() {
}
private Date startDate = null;
public Date getStartDate() {
return this.startDate;
}
public void setStartDate(Date startDate)
{
this.startDate = startDate;
}
}
The selectAll attribute indicates that the
Add All and Remove All buttons should be
shown. A label for the component as a whole (label) is shown
next to the component (labelOnTop is false). Labels have
been specified for the list of available items and for the list of
selected items. The sorted attribute indicates that the options on
the list will be shown in alphabetical order.
Example 2: DateFormat Pattern and Range of Dates configured
The component gets the options from a managed bean called
TravelBean. The value of the component
selectedDate is bound to a property
travelDateof the managed
bean. A label for the component as a whole (label) is
shown next to the component; the label is retrieved from a message
bundle.
The component has been configured to use a pattern for date
representation consisting of four digits for the year, two for the
month, and two for the day, separated by dashes. This pattern, set
using the dateFormatPattern attribute will be used
regardless of locale. With this date format pattern, the default
help string will be "YYYY-MM-DD", which is suitable for English,
but not for other locales where other words are used, so a
different message is retrieved for each locale
(dateFormatPattern).
The component is also configured to restrict the range of dates that
are valid, so that the first valid date is the day after the day
the component is viewed, and the last valid date is six months
from that date.
<ui:calendar id="travelDate"
selectedDate="#{TravelBean.travelDate}"
label="#{msgs.travelDate}"
dateFormatPattern="yyyy-MM-dd"
dateFormatPatternHelp="#{msgs.dateFormatPattern}"
minDate="#{TravelBean.tomorrowsDate}"
maxDate="#{TravelBean.sixMonthsFromNow}" />
Auto-generated component class.
Do NOT modify; all changes
will be lost!
| 