日历

<input type='text'><div> 更改为可视的小型日历,该日历带有相关联的不可视输入字段,用于保存日历值(当前选择的日期)。

可以通过 CSS 将样式应用于小型日历。此组件与 DateTimeConverter 处理相同的日历。

发送组件的 JSF 标记

<hx:inputMiniCalendar>

基本 HTML

<input type="text" id="id_INPUT"><div id="id">

日历的值将作为输入字段值进行传递。应该按照组件的相关转换器所描述的样式对该值进行格式化。如果最初未将任何值传递给页面,则日历将没有初始值。

应该对输入字段设置与日历相关联的事件处理程序。目前,仅支持 onfocus、onblur 和 onchange。

JSFCalendar 组件将显示一个小型日历,该日历带有相关联的不可视输入字段。

日历值(日历中当前选择的值)保存在该输入字段中。该输入字段处于活动状态;因此,提交页面时,将在此字段与服务器之间传递所选的值。

可视日历显示为 div,并且可以通过下面列示的一组 CSS 类设置样式。

通过 DateTimeConverter,日历支持所有的日历类型,例如罗马历。此转换器用于在输入字段值(字符串)与 JavaScript™ 日期对象之间进行转换。此转换器也用于对日历中显示的月份、年份和星期进行格式化。应该在构造日历之前构造转换器,并且,应该将转换器 ID 传递给日历。该输入字段还可以与 DateTimeValidator 相关联。如果某个验证器与输入字段相关联,则必须将其作为构造函数的属性传递给 Calendar。

JavaScript 构造函数

hX_5.addComponent("id", new hX_5.JSFCalendar(attributes)); 其中

id

组件所连接至的 HTML 标记的 ID。

属性

逗号分隔的属性列表,其中每个属性都是一个加引号的字符串,此字符串包含使用冒号分隔的属性名称和值,例如,"label:MyLabel"。

属性

表 1. JSFCalendar 属性

属性名称

描述

css-prefix

描述日历可视外观的 CSS 类集的基类。

converter

已构造的转换器的 ID。此转换器描述输入字段中值的格式。

disabled

指定对象是否可用。

first-day-of-week

被视为一周中的第一天的那天。零表示星期日。

multi-line

如果为 true,则日历上的标题将显示为两行,即年份和月份,分别包含控制月份和控制年份的单独按钮。如果为 false,则年份和月份将显示在一行上,该行带有仅控制月份的按钮。

validator

已构造的验证器的 ID。如果提供了验证器,则将使用此验证器中所描述的约束来限制用户可选取的值。

CSS 类

除了日历不使用大小类以外,类结构与日期拾取器完全相同。

表 2. JSFCalendar CSS 类

CSS 类名

描述

base

对包含日历的最外侧 div 设置样式。要显式控制日历的大小,请在这个类中指定宽度(高度)属性。

<base>-size

对将日历组织到标题和主体区域的最外侧表设置样式。

<base>-Header

对日历表中包含三个标题行(年份行、月份行和工作日行)的表设置样式。

<base>-HeaderLine1

在标题表中,对表的第一行(年份行)中不包含年份的单元格设置样式。

<base>-HeaderLine2

在标题表中,对表的第二行(月份行)中不包含月份的单元格设置样式。

<base>-HeaderWeekday

在标题表中,对表的第三行(工作日行)中单元格设置样式。

<base>-HeaderYear

在标题表中,对第一行中包含年份的中间表单元格设置样式。

<base>-HeaderMonth

在标题表中,对第二行中包含月份的中间表单元格设置样式。

<base>-Button

在标题表的第一行和第二行中,对用于滚动日历的四个按钮设置样式。

<base>-Body

对日历表中包含各天的表设置样式。

<base>-CurrentMonth

在主体表中,对包含当前月份中某一天的表单元格设置样式。

<base>-OtherMonth

在主体表中,对包含的某一天不属于当前月份(例如,前一个月的后几天或者后一个月的前几天需要显示在当前所选月份的各天之前/之后)的表单元格设置样式。

<base>-InvalidDay

在主体表中,如果由于日期所连接的验证器不允许而未选中某一天,则对包含这一天的表单元格设置样式。

<base>-CurrentDay

在主体表中,对包含当前所选日的表单元格设置样式。

<base>-Today

在主体表中,对表示当前日期的表单元格设置样式。

<base>-CurrentToday

在主体表中,如果当前所选日与当前日期相同,则对表示今天的日期和当前所选日的表单元格设置样式。

<base>-Hover

定义样式以便在某一天获得鼠标或键盘焦点时,将此样式添加至这一天的样式。

API 调用

表 3. JSF 日历 API 调用

API 调用

描述

redraw()

重新绘制组件时将对基本标记的特性/属性所作的任何更改考虑在内。

uirelease()

释放与组件相关联的任何活动 UI。

setValue(string)

设置组件的值并确保提供的值有效。

object = getValue(boolean)

检索组件的值。如果该 boolean 为 false,则此函数等价于获取基本标记的值。如果该 boolean 为 true,则此值将作为 JavaScript 日期/时间对象返回,而不是作为字符串返回。

object = setAttribute(attribute)

设置属性,或如果以前已设置属性,则更改其值。

string = getAttribute(attribute-name)

检索属性的当前值。

辅助功能

日历可通过键盘进行访问。日历作为单一条目遵循页面的跳进顺序。当日历获得键盘焦点时,例如,用户通过按 Tab 键转到该日历或者单击该日历,当前所选日期将作为带物理焦点输入字段的值供屏幕朗读器使用。虽然日历带有焦点,但按空格键或回车键将选择当前选择的日期。按向左、向右、向上和向下方向键将更改所选日期。按 SHIFT + 向左/向右方向键将更改月份,按 SHIFT + 向上/向下方向键将更改所选年份。按 PgUp 和 PgDn 键将更改月份。按 Home 或 End 键将转到该月的第一天或最后一天。

目前,尽管日历与 XHTML 一致,但不报告 XML 角色或状态。

局限性

示例代码

在页面中添加伊斯兰日历。将有效日期限制为伊斯兰纪元 1427 年中的那些日期。

<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>

反馈