HOME / Docs & Support / NetBeans 6.0 / Web Application Documentation

使用“日历”组件

由 NetBeans 教程团队贡献

2007 年 12 月 [修订版本号：V6.0]

由 NetBeans 中文社区的翻译（2008 年 2 月）

本教程描述了如何使用 NetBeans IDE 6.0 中的JSF 1.2 (Woodstock) 日历组件。本教程展示了如何设置最小和最大的日历日期，如何验证用户选择的日期落在这个范围。

-	选择一个日历日期
-	设置最小和最大的日历日期
-	验证日历范围
-	改变日历样式
-	使用“日历”组件的技巧
-	总结

本教程使用到的图像文件

» table_title_solid.gif

本教程可用以下技术和资源运作

JavaServer Faces 组件/ Java EE 平台	1.2 和 Java EE 5* 1.1 和 J2EE 1.4
Travel 数据库	非必需

* 要发挥 NetBeans IDE 6.0 的 Java EE 5 性能的优势，请使用与 Java EE 5 规范完全兼容的应用服务器，例如 Sun Java System Application Server 9（GlassFish 项目）。

本教程是为 Sun Java Application Server PE 9.0 Update Release 1 而定制的。如果您正在使用不同的服务器，请参考发行说明和 FAQ 以了解已知的问题和变通的方法。了解关于被支持的服务器和 Java EE 平台的详细信息，请参见发行说明。

选择一个日历日期

本教程使用的 JSF 1.2 “日历”组件，您可以在组件面板的基本类别里找到。首先添加一个日历到您的项目中。然后添加验证代码来验证用户所选择的日期落在一个默认的最小和最大的日历范围之内。

创建一个新的 Visual Web JSF application 项目，把它命名为 CalendarExample，并选择 Visual Web JavaServer Faces 框架。

您设计的页面如下图所示。

图 1：日历格式页面设计
从组件面板的基本类别里，拖放一个“日历”组件到页面上。

在属性窗口中，设置以下的值：

属性	值
id	`startCalendar`
dateFormatPatternHelp	`MM/dd/yyyy`
label	`Start Date:`
required	for True

在“日历”组件的右边放置一个“消息”组件。按住 Ctrl-Shift 组合键并从“消息”组件拖放一根线到“日历”组件。
这个操作允许“消息”组件为“日历”组件显示错误消息。
在“日历”组件的下方放置一个“静态文本”组件。设置 id 属性为 validationMsgStaticText。
在“静态文本”组件下方放置一个“按钮”组件，输入 Validate，并按下 Enter 键。在属性窗口中，设置 id 属性为 validateButton。

双击 Validate 按钮，并在 validateButton 的 action 方法中添加以下代码：

代码示例 1：验证日历日期的代码

public String validateButton_action() {
        validationMsgStaticText.setText(
                (String)DateFormat.getDateInstance(
                DateFormat.MEDIUM).format(startCalendar.getSelectedDate())
                + " is a valid date.");
        return null;
    }

这段代码获得用户输入的“日历”组件的日期。如果日期是在“日历”组件的最小和最大日期集之间，“静态文本”组件显示该日期和有效的标示。

右键点击代码，在弹出菜单中选择“修复导入”以解决 DateFormat 找不到的错误。
布署并运行该应用程序，然后打开弹出式日历。
“日历”组件显示当前月份和年份。默认情况下，您可以选择的最早的有效日期是当前日期的 100 年前，最后的日期是当前日期的 100 年后。
从弹出式日历中选择一个日期并点击 Validate 按钮。

如果您选择的日期落在默认的最小和最大日期之间，“静态文本”组件显示一个有效的消息，如图 2 所示。如果您选择的日期在这个范围之外，您将看到一个验证错误的消息。

图 2：有效的日历日期

设置最小和最大的日历日期

默认情况下，日历刚好跨越 200 年。然而，在多数情况下，您要为您的应用定义一个特殊的跨度。本节中，通过把最小属性设置为今天的日期，把最大属性设置为从今天起的一年，您将限制日历跨度为一年。

在 Java 编辑器中，滚动到 preprocess 方法。添加以下代码（以粗体显示）以清除“静态文本”组件中已有的消息。

代码示例 2：清除旧的有效日期消息

public void preprocess() {
        // Clear out old valid date message before start
        // new validations
        validationMsgStaticText.setText("");
}

找到 prerender 方法。添加以下代码为“日历”组件的文本域预填充今天的日期。

代码示例 3：设置默认的 Start Date

public void prerender() {
        // Set default start date, if not
        // already entered
        java.util.Calendar date = GregorianCalendar.getInstance();
        if (startCalendar.getSelectedDate() == null) {
            startCalendar.setSelectedDate(date.getTime());
        }
}

这段代码显示了一个错误，因为找不到 GregorianCalendar 变量。您可以在本节稍后为这个类添加一个导入语句。

在 validateButton 的 action 方法上方添加以下两个方法。

代码示例 4：设置最小和最大的日历日期

private Date minCalDate;

     public Date getMinCalDate() {
       java.util.Calendar date = java.util.Calendar.getInstance
           (FacesContext.getCurrentInstance().getViewRoot().getLocale());
       // Have to zero out the time because
       // the date comparison is time sensitive
       date.set(java.util.Calendar.HOUR_OF_DAY, 0);
       date.set(java.util.Calendar.MINUTE, 0);
       date.set(java.util.Calendar.SECOND, 0);
       date.set(java.util.Calendar.MILLISECOND, 0);
       return date.getTime();
   }

    private Date maxCalDate;

    public Date getMaxCalDate() {
        java.util.Calendar date = GregorianCalendar.getInstance();
        date.set(java.util.Calendar.HOUR_OF_DAY, 0);
        //here is where you adjust your time period
        date.add(java.util.Calendar.YEAR, 1);
		SimpleDateFormat formatter
                = new SimpleDateFormat("EEE, MMM d, yyyy 'at' hh:mm:ss a zzz");
        error(formatter.format(date.getTime()));
        maxCalDate = date.getTime();
        return maxCalDate;
    }

getMinCalDate 方法设置“日历”组件的最小日期为今天。在 getMaxCalDate 方法中， date.add(java.util.Calendar.YEAR, 1); 这行设置了最大日期为从今天起的一年。更多关于设置最小和最大日期的范例，包括如何设置日历显示以前的年份，请参见本教程标题为使用“日历”组件的技巧的小节。

在 Java 编辑器中点击右键并在弹出菜单中选择“修复导入”。确保 Date 字段中选择的是 java.util.Date 并点击“确定”按钮。
回到设计视图，右键点击“日历”组件，并在弹出菜单中选择“属性绑定”。
在“属性绑定”对话框中，将“日历”组件的 minDate 属性绑定到 Page 1 的 minCalDate，如下图所示。点击“应用”按钮。

图 3：绑定 mindate 属性
将“日历”组件的 maxDate 属性绑定到 Page 1 的 maxCalDate，并点击“应用”按钮。点击“关闭”按钮以关闭对话框。
运行这个应用程序。选择的日期为今天的日期。打开弹出的日历，您会注意到今天的日期被高亮显示。同时，您还会注意到现在日历的跨度从当前年份的一月份到下一年的十二月份。
在日历中选择任意日期并按 Validate 按钮。
如果所选择的日期在今天日期的一年之内，应用程序将显示一个有效的消息。如果您选择了一个在此范围之前或之后的日期，应用程序将显示一个错误消息。

验证日历范围

现在假设您正在开发一个旅行的程序。您要让您的用户为行程选择开始日期和结束日期，而且行程至少为一周时间。本节中，您将给应用程序添加一个 End 日期，您将添加代码以验证用户在 End 日期中设置的日期至少在 Start 日期之后一周。

在页面的 Start 日期下放置一个“日历”组件。根据需要调整其它组件。下图是您将在本节所设计的页面。

图 4：包含一个结束日期的页面

在属性窗口中为新添加的“日历”设置以下值：

属性	值
id	`endCalendar`
dateFormatPatternHelp	`MM/dd/yyyy`
label	`End Date:`
required	for True

在“日历”组件的右边放置一个“消息”组件。按住 Ctrl-Shift 组合键并从“消息”组件拖放一根线到“日历”组件。
右键点击 End“日历”组件，并在弹出菜单中选择“属性绑定”。
将 End“日历”组件的 minDate 属性绑定到 Page 1 的 minCalDate。点击“应用”按钮。
将 End“日历”组件的 maxDate 属性绑定到 Page 1 的 maxCalDate。点击“应用”按钮，然后关闭属性绑定对话框。
在设计视图中，右键点击 End“日历”组件并选择“编辑事件处理程序”> validate 。

将以下代码添加到 endCalendar_validate() 方法中。这段代码确保结束日期至少在开始日期的一周之后。

代码示例 5：验证开始日期的代码

public void endCalendar_validate(FacesContext context,
           UIComponent component, Object value) {
        java.util.Calendar endDate = GregorianCalendar.getInstance();
        endDate.setTime((Date)value);
        java.util.Calendar startDate = GregorianCalendar.getInstance();
        startDate.setTime(startCalendar.getSelectedDate());
        if (startCalendar.getSelectedDate() != null) {
            if (startDate.after(endDate)) {
                throw new ValidatorException(new FacesMessage
                        ("End date must be after start date."));
            } else {
                startDate.add(java.util.Calendar.DATE, 7);
                if (startDate.after(endDate)) {
                    throw new ValidatorException(new FacesMessage
                         ("End date must be at least one week after the start date."));
                }

            }
        }
    }

右键点击 Java 编辑器并选择“修复导入”以修复 FacesMessage 和 ValidatorExeception 错误。

修改 validateButton 的 action 方法以添加对 End“日历”组件的验证：

代码示例 6：验证结束日期的代码

public String validateButton_action() {
            SimpleDateFormat formatter
                = new SimpleDateFormat("EEE, MMM d, yyyy");
        validationMsgStaticText.setText(
                formatter.format(startCalendar.getSelectedDate())
                +
                " - "
                +
                formatter.format(endCalendar.getSelectedDate())
                + " is a valid date range.");
        return null;
    }

运行应用程序。选择一个 Start Date 和 End Date 并点击 Validate 按钮。

如果日期在最小和最大日期之间（今天和从今天开始的一年内），并且如果结束日期晚于开始日期之后的一周，程序将显示一个如图 2 所示的有效消息。否则，应用程序将显示一个如下图所示的错误消息。

图 5：日历范围 - 无效结果

改变日历样式

您可以改变日历组件的颜色和样式。在此，您将改变日历组件的表头的外观。

保存图像 table_title_solid.gif 到您的 projects_directory\CalendarExample\web\resources 文件夹。

在项目窗口中，双击 CalendarExample > Web 页 > resources 节点 > stylesheet.css 节点。添加代码示例 7 或 8，这取决于您使用的 JavaServer Faces 组件的版本。

代码示例 7：JavaServerFaces 1.1 日历组件的样式代码

.CalPopDiv .DatSelDiv{
background-image:url(table_title_solid.gif);
}

.CalPopDiv .DatDayHdrTxt {
color: red
}

代码示例 8：JavaServerFaces 1.2 日历组件的样式代码

.CalPopDiv_sun4 .DatSelDiv_sun4 {
background-image:url(table_title_solid.gif);
}

.CalPopDiv_sun4 .DatDayHdrTxt_sun4 {
color: red
}

第一个样式类为弹出式日历的标题设置了一个新的背景图像。第二个样式类将时期的首字母设置为红色。

NetBeans 在线帮助里有一个可用的完整的日历组件的 CSS 样式列表。从主菜单中选择“帮助” > “帮助内容”并搜索“日历组件 CSS 类”主题。

布署并运行该应用程序，然后打开弹出式日历。

使用日历组件的技巧

代码示例 4 的 getMaxCalDate 方法中包含了以下代码用以设置最大值为最小值的一年之后：
```
date.add(java.util.Calendar.YEAR, 1);
```
调整以天为单位的时间周期，例如一周时间，可以使用类似以下的代码：
```
date.add(java.util.Calendar.DATE, 7);
```
代码示例 4 的 getMinCalDate 方法中也包含了设置最小日期为今天的代码。要显示以前的年份，可以使用类似以下的代码。这句代码显示了前 10 年的日历：
```
date.add(java.util.Calendar.YEAR, -10);
```
要改变日历的日期格式，点击 dateFormatPattern 属性后的省略符按钮并选择一个预定义的日期格式。如果属性编辑器没有包含您要的格式，您可以创建您自己的格式。您可以输入的值被限制为年（用 yyyy 表示）、月（用 MM 表示）、日（用 dd 表示）的几种组合。典型的分隔符有斜杠（/），句点（.），和短横线（-）。