HOME / Docs & Support / NetBeans 5.5

>> 更多 Visual Web Pack 文档

使用日历组件

撰稿人：Gail Chappell 和 Chris Kutler

2007 年 5 月 [修订号：V5.5.1-1]

本教程介绍了如何使用 NetBeans Visual Web Pack 5.5 中的日历组件。它说明了如何设置日历日期的最小值和最大值，以及如何验证用户选择的日期是否在此范围之内。

-	选取日历日期
-	设置日历日期的最小值和最大值
-	验证日历范围
-	更改日历样式
-	使用日历组件的提示
-	日历的替代组件

本教程中使用的图像文件

- table_title_solid.gif

本教程将使用以下技术和资源

JavaServer Faces 组件/ Java EE 平台	1.2/Java EE 5* 1.1/J2EE 1.4
Travel 数据库	不是必需的
BluePrints AJAX 组件库	不是必需的

* 该教程发布时，只有 Sun Java System Application Server 支持 Java EE 5。

本教程是针对使用 Sun Java Application Server PE 9.0 Update Release 1 和 Tomcat 5.5.17 进行定制的。如果您使用的是其他服务器，请参考发行说明和常见问题解答以了解已知问题和解决方法。有关支持的服务器和 Java EE 平台的详细信息，请参见发行说明。

选取日历日期

本教程使用组件面板“基本”类别中的日历组件。首先，将日历添加到项目中。然后，添加代码以验证用户选取的日期是否在缺省的最小和最大日历范围之内。

创建一个新的 Visual Web 应用程序项目，并将其命名为 CalendarExample。

按下图所示设计页面。

图 1：日历格式页面设计
将一个日历组件从组件面板的“基本”类别拖动到该页上。
“年-月-日”这种缺省的显示格式（例如，上图中的 aaaa-nn-jj）是简体中文语言环境的缺省格式。
在“属性”窗口中，设置以下值：

属性值

id startCalendar

label Start Date:

required 选中
将一个消息组件放置在该日历组件的右侧。按 Ctrl-Shift 组合键，然后从消息组件拖动一条直线到日历组件。
此操作使消息组件能够显示日历的错误消息。
在日历组件下面放置一个静态文本组件。将 id 属性设置为 validationMsgStaticText。
在静态文本组件下面放置一个按钮组件，键入 Validate，然后按 Enter 键。在“属性”窗口中，将 id 属性设置为 validateButton。

双击 "Validate" 按钮并将以下代码添加到 validateButton 操作方法中：

代码样例 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 年。但在大多数情况下，您需要定义特定于应用程序的时间跨度。在本部分，我们使用以下方法将日历跨度限制为一年。即，将 minimum 属性设置为当天日期，而将 maximum 属性设置为一年后的当天日期。

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

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

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

查找 prerender 方法。添加以下代码，以便采用当天日期预填充“日历”文本字段。

代码样例 3：设置缺省开始日期

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 变量。稍后，我们将在本部分中为该类添加 import 语句。

在 validateButton 操作方法上面添加以下两个方法。

代码样例 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 编辑器中单击鼠标右键，然后从弹出式菜单中选择“修复导入”。请确保 java.util.Date 出现在“全限定名称”字段中，然后单击“确定”。
返回到可视设计器，右键单击日历组件，然后从弹出式菜单中选择“属性绑定”。
在“属性绑定”对话框中，将日历的 minDate 属性绑定到 Page 1 的 minCalDate，如下图所示。单击“应用”。

图 3：mindate 属性的绑定
将日历的 maxDate 属性绑定到 Page 1 的 maxCalDate，然后单击“应用”。单击“关闭”以关闭该对话框。
运行应用程序。打开日历的弹出式菜单，请注意，当天日期处于突出显示状态。同时还请注意，日历现在的跨度为当年的 1 月份到来年的 12 月份。
在日历中选择任何日期，然后单击 "Validate" 按钮。
如果该日期在当天日期起一年之内，则应用程序将显示一条有效消息。如果选取的日期在此范围之前或之后，则应用程序将显示一条错误消息。

验证日历范围

现在，假设您要开发一个旅行程序。您希望由用户选择行程的开始日期和结束日期，并且行程必须至少为一周时间。在本部分，我们将在应用程序中添加一个结束日历。您需要添加一些代码，以验证用户在结束日历中设置的日期是否至少在开始日历中设置的日期一周之后。

将一个日历组件放置在页面上开始日历的正下方。根据需要调整其他组件。下面是在此部分设计的页面。

图 4：包含结束日历的页面
在新日历的“属性”窗口中，设置以下值：

属性值

id endCalendar

label End Date:

required 选中
将一个消息组件放置在该日历组件的右侧。按 Ctrl-Shift 组合键，然后从消息组件拖动一条直线到日历组件。
右键单击结束日历组件，然后从弹出式菜单中选择“属性绑定”。
将结束日历的 minDate 属性绑定到 Page 1 的 minCalDate。单击“应用”。
将结束日历的 maxDate 属性绑定到 Page1 的 maxCalDate。单击“应用”，然后关闭属性绑定对话框。
在可视设计器中，右键单击结束日历组件，然后选择“编辑事件处理程序”> "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."));
                }

            }
        }
    }

如果您使用的是 JavaServer Faces 1.2 组件，请在 Java 编辑器中单击鼠标右键，选择“修复导入”以修复 FacesMessage 和 ValidatorExeception 错误。

修改 validateButton 操作方法以包括结束日历的日期验证：

代码样例 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;
    }

运行应用程序。选择开始日期和结束日期，然后单击 "Validate" 按钮。

如果日期介于最小（当天）和最大日期（一年以后的当天日期）之间，并且结束日期与开始日期的时间间隔超过一周，则应用程序将显示一条有效消息，如图 5 所示。否则，应用程序将显示一条错误消息。

图 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：JavaServer Faces 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 方法中包含了将最小日期设置为当天的代码。要在日历中显示过去几年的时间，请使用类似于以下内容的代码。此代码显示过去十年的日历时间：
```
date.add(java.util.Calendar.YEAR, -10);
```
要更改日历的日期格式，请在 dateFormatPattern 属性中单击省略号 (...) 按钮，然后选择预定义的日期格式。如果属性编辑器不包含所需的格式，您可以创建自己的格式。可输入的值仅限于 yyyy（表示年）、MM（表示月）和 dd（表示日）的某种组合。典型的分隔符为斜杠 (/)、句点 (.) 和破折号 (-)。