Styles can be applied to the mini calendar via CSS. The component handles the same calendars as the DateTimeConverter.
<hx:inputMiniCalendar>
<input type="text" id="id_INPUT"><div id="id">
The value of the calendar is passed as the value of the input field. The value should be formatted in the style described by the converter associated with the component. If no value is initially passed to the page, the calendar has no initial value.
Event handlers associated with the calendar should be set on the input field. Only onfocus, onblur and onchange are currently supported.
The JSFCalendar component displays a mini calendar with an associated (non visible) input field.
The Calendar value (the currently selected value in the Calendar) is kept in the input field. The input field is active; therefore, the selected value is transmitted from and to the server in this field when the page is submitted.
The visible Calendar is displayed as a div that is styled via the set of CSS classes listed below.
The Calendar supports all of the calendar types (for example Gregorian) via the DateTimeConverter. The converter is used to change the value of the input field (a string) to and from a JavaScriptâ„¢ date object. It is also used to format the month, year, and day of week displayed in the Calendar. The converter should be constructed before the Calendar is constructed and the ID of the converter passed to the Calendar. The input field can also be associated with a DateTimeValidator. If a validator is associated with the input field, it must be passed to the Calendar (as an attribute of the constructor).
hX_5.addComponent("id", new hX_5.JSFCalendar(attributes)); where
id |
The ID of the HTML tag to which the component is attached. |
attributes |
Comma separated list of attributes where each attribute is a quoted string consisting of the attribute name and value separated by a colon, for example "label:MyLabel". |
Attribute name |
Description |
---|---|
css-prefix |
The base class of a set of CSS classes that describe the visual appearance. |
converter |
The ID of a converter that has already been constructed. The converter describes the format of the value in the input field. |
disabled |
Specifies if the object is available. |
first-day-of-week |
Day of the week that is treated as the first day of the week. Zero means Sunday. |
multi-line |
If true, the header over the calendar is displayed as two lines (year and month) with independent buttons that control the month and year. If false, the year and month are displayed on one line with buttons that control only the month. |
validator |
The ID of a validator that has already been constructed. If the validator is supplied, the constraints described in the validator are used limit the values a user can pick. |
The class structure is identical to the date picker except for the size class that is not used by the calendar.
CSS class name |
Description |
---|---|
base |
Styles the outermost div that contains the calendar. To explicitly control the size of the calendar, specify the width (height) properties in this class. |
<base>-size |
Styles the outermost table that organizes the calendar into header and body areas. |
<base>-Header |
Styles the table inside the calendar table that contains the three header rows (the year row, the month row and the days of the week row). |
<base>-HeaderLine1 |
Within the header table, styles the cells in the first row (the year row) of the table that do not contain the year. |
<base>-HeaderLine2 |
Within the header table, styles the cells in the second row (the month row) of the table that do not contain the month. |
<base>-HeaderWeekday |
Within the header table, styles the cells in the third row (the weekday row) of the table. |
<base>-HeaderYear |
Within the header table, styles middle table cell in the first row that contains the year. |
<base>-HeaderMonth |
Within the header table, styles middle table cell in the second row that contains the month. |
<base>-Button |
Within the header table, in the first and second rows, styles the four buttons used to scroll the calendar. |
<base>-Body |
Styles the table inside the calendar table that contains the days. |
<base>-CurrentMonth |
Within the body table, styles a table cell that contains a day in the current month. |
<base>-OtherMonth |
Within the body table, styles a table cell that contains a day not in the current month (for example the last days of the previous month or the first days of the next month that need to be displayed before/after the days in the currently selected month). |
<base>-InvalidDay |
Within the body table, styles a table cell that contains a day that may not be selected because such a day is not allowed by the validator attached to the date. |
<base>-CurrentDay |
Within the body table, styles the table cell that contains the currently selected day. |
<base>-Today |
Within the body table, styles the table cell that represents the current date. |
<base>-CurrentToday |
Within the body table, if currently selected day is the same as the currectdate, then styles the table cell that represents both today's date and the current selection. |
<base>-Hover |
Defines the style that is added to the style of a day when the day has mouse or keyboard focus. |
API call |
Description |
---|---|
redraw() |
Redraw the component taking into account any changes made to the attributes/properties of the base tag. |
uirelease() |
Releases any active UI associated with the component. |
setValue(string) |
Sets the value of the component and ensures that the value provided is valid. |
object = getValue(boolean) |
Retrieves the value of the component. If the boolean is false, this is equivalent to getting the value of the base tag. If the boolean is true, the value is returned as a JavaScript date/time object instead of as a string. |
object = setAttribute(attribute) |
Sets an attribute or changes its value (if it was set previously). |
string = getAttribute(attribute-name) |
Retrieves the current value of an attribute. |
The Calendar is keyboard accessible. The Calendar is in the tab order of the page (as a single entry). When the Calendar has keyboard focus (for example someone tabs to it or clicks on it), the currently selected date is available to screen readers as the value of the input field (that holds physical focus). While the Calendar has focus, pressing spacebar (or newline) selects the currently selected day. Pressing the left, right, up and down arrows changes the selected day. Pressing SHIFT left/right arrow changes the month and pressing SHIFT up/down arrow changes the selected year. Pressing PgUp and PgDn changes the month. Pressing Home or End goes to the first or last day of the month.
The Calendar currently does not report XML roles or states (although it is XHTML compliant).
Add an Islamic calendar to a page. Restrict the valid dates to only those in the year 1427 AH.
<input type="text" id="form1:calendar1_INPUT" value="Muharram 01, 1427 AH" /> <div id="form1:calendar1" /> <script> hX.addConverter("A", new hX.DateTimeConverter("strict:1", "ICU4J", "epoch:i", format:MMMM dd, yyyy G")); hX.addValidator("B", new hX.DateTimeValidator("minimum-bound:20060130000000", "maximum-bound:20070118000000")); hX.addComponent("form1:calendar1_CAL_DIV", new hX.JSFCalendar("converter:A","validator:B", "first-day-of-week:6", "multi-line:false")); </script>