corner imagecorner image
FeaturesPluginsDocs & SupportCommunityPartners

使用日历(Calendar)组件

由 NetBeans 中文社区的 翻译

参照 由 NetBeans 中文社区的赵钟秋(2008 年 2 月)翻译的《使用“日历”组件》一文

本教程描述了在 Netbeans 6.5 中如何使用 JSF 1.2 (Woodstock) 的日历组件。 教程将指导您如何设置日历日期的最大值与最小值以及如何验证用户所选择的日期在范围内。

目录

本页上的内容适用于 NetBeans IDE 6.5

本教程使用到的图片文件

» table_title_solid.gif

按照本教程,您需要以下软件和资源。

软件或资源 所需版本
NetBeans IDE 6.5 Java 版本
Java开发工具包 (JDK) 版本 6 或者 版本 5
JavaServer Face Component/
Java EE Platform
Java EE 5* 中使用1.2版本(JSF)或者
J2EE 1.4 中使用1.1版本(JSF)
GlassFish Application Server 第二版(V2)
Travel Database 可选

* 要发挥 NetBeans IDE 的 Java EE 5 性能的优势,请使用与 Java EE 5 规范完全兼容的应用服务器,例如 GlassFish Application Server V2 UR2。如果您在使用一个不同的服务器,请参考 发行说明 以及 疑难解答(FAQ) 了解已知的问题及其解决的方法。 了解更多被支持的服务器以及 Java EE 平台的详细信息,请参见发行说明

挑选日历日期

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

  1. 新建一个 Visual Web JSF 应用程序项目,命名为 CalendarExample,并启用 Visual Web JavaServer Faces 框架。

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

    日历格式设计页面
  2. 从面板中 Woodstock 的基本部分拖拽一个日历组件(Calendar)放置到页面上。
  3. 右键单击日历组件,选择添加绑定属性.
  4. 在“属性”窗口中,设置以下值:

    属性(Property)     值(Value)
    id startCalendar
    dateFormatPatternHelp MM/dd/yyyy
    label 开始日期:
    required 对号图标 勾选为真(True)
  5. 在日历组件右侧放置一个消息组件。

  6. 在日历组件的“属性”窗口中,选择 startCalendar 作为 for 属性,参见下图。

    选择 startCalendar 作为 For 属性

    这个操作允许消息组件为日历组件显示错误消息。
  7. 在日历组件的左侧放置一个静态文本组件。设置 id 属性为 validationMsgStaticText
  8. 右键单击静态文本组件,选择添加绑定属性
  9. 在静态文本组件的下面放置一个按钮组件,输入显示文本为 Validate,然后按回车键。在“属性”窗口中,设置 id 属性为 validateButton
  10. 右键单击按钮组件,选择添加绑定属性
  11. 双击 Validate 按钮,在 validateButton 行为(action)方法中添加如下代码:

    代码示例 1:验证日历日期的代码
    public String validateButton_action() {
            validationMsgStaticText.setText(
                    (String)DateFormat.getDateInstance(
                    DateFormat.MEDIUM).format(startCalendar.getSelectedDate())
                    + " is a valid date.");
            return null;
        }

    这段代码获得用户输入的日历组件的日期。如果日期是在日历组件的最小和最大日期集之间,静态文本组件显示该日期和有效的标示。
  12. 右键点击代码,在弹出菜单中选择“修复导入”以解决 DateFormat 找不到的错误。
  13. 布署并运行该应用程序,然后打开弹出式日历。

    注意: 默认情况下,项目创建时即时编译功能是启用的,因此您在 IDE 中无需为运行应用程序而事先编译您的代码。更多关于即时编译功能的信息,请参见 创建、导入以及配置 Java 项目(英文) 手册的即时编译小节。

    “日历”组件显示当前月份和年份。默认情况下,您可以选择的最早的有效日期是当前日期的 100 年前,最后的日期是当前日期的 100 年后。
  14. 从弹出式日历中选择一个日期并点击 Validate 按钮。

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

    日历日期格式

设置日历日期的最大值与最小值

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

  1. 在 Java 编辑器中,滚动到 preprocess 方法。添加以下代码(以 粗体显示)以清除静态文本组件中已有的消息。

    代码示例 2: 清除旧的日期验证信息
    public void preprocess() {
            // Clear out old valid date message before start
            // new validations
            validationMsgStaticText.setText("");
    }
  2. 找到 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 变量。您可以在本节中稍后为这个类添加一个导入语句。
  3. 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); 这行设置了最大日期为从今天起的一年。更多关于设置最小和最大日期的范例,包括如何设置日历显示以前的年份,请参见本教程标题为 使用日历组件的技巧的小节。
  4. 在 Java 编辑器中点击右键并在弹出菜单中选择“修复导入”。确保 Date 字段中选择的是 java.util.Date 并点击“确定”按钮。
  5. 回到设计视图,右键点击日历组件,并在弹出菜单中选择“属性绑定”。
  6. 在“属性绑定”对话框中,将“日历”组件的 minDate 属性绑定到 Page 1 的 minCalDate 上,如下图所示。点击“应用”按钮。

    绑定 mindate 属性
  7. 将“日历”组件的 maxDate 属性绑定到 Page 1 的 maxCalDate 上,并点击“应用”按钮。点击“关闭”按钮以关闭对话框。
  8. 运行这个应用程序。

    注意: 默认情况下,项目创建时即时编译功能是启用的,因此您在 IDE 中无需为运行应用程序而事先编译您的代码。更多关于即时编译功能的信息,请参见 创建、导入以及配置 Java 项目(英文) 手册的即时编译小节。

    选择的日期为今天的日期。 打开弹出的日历,您会注意到今天的日期被高亮显示。同时,您还会注意到现在日历的跨度从当前年份的一月份到下一年的十二月份。
  9. 在日历中选择任意日期并按 Validate 按钮。

    如果所选择的日期在今天日期的一年之内,应用程序将显示一个有效的消息。如果您选择了一个在此范围之前或之后的日期,应用程序将显示一个错误消息。

验证日历日期范围

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

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

    包含结束日期的页面
  2. 右键点击 End 日历组件,并在弹出菜单中选择“属性绑定

  3. 在属性窗口中为新添加的日历组件设置以下值:

    属性(Property)     值(Value)
    id endCalendar
    dateFormatPatternHelp MM/dd/yyyy
    label 结束日期:
    required 对号图标 勾选为真(True)
  4. 在日历组件的右边放置一个消息组件。按住 Ctrl-Shift 组合键并从消息组件拖放一根线到日历组件。
  5. 右键点击 End 日历组件,并在弹出菜单中选择“属性绑定”。
  6. 将 End 日历组件的 minDate 属性绑定到 Page 1 的 minDate。点击“应用”按钮。
  7. 将 End 日历组件的 maxDate 属性绑定到 Page 1 的 maxDate。点击“应用”按钮,然后关闭属性绑定对话框。
  8. 在设计视图中,右键点击 End 日历组件并选择 “编辑事件处理程序” > validate。
  9. 将以下代码添加到 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."));
                    }
                    
                }
            }
        }

    这段代码确保结束日期至少在开始日期的一周之后。

  10. 右键点击 Java 编辑器并选择“修复导入”以修复 FacesMessage 和 ValidatorExeception 错误。
  11. 修改 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;
        }
  12. 运行程序。

    注意: 默认情况下,项目创建时即时编译功能是启用的,因此您在 IDE 中无需为运行应用程序而事先编译您的代码。更多关于即时编译功能的信息,请参见 创建、导入以及配置 Java 项目(英文) 手册的即时编译小节。

    选择一个 Start Date 和 End Date 并点击 Validate 按钮。

    如果日期在最小和最大日期之间(今天和从今天开始的一年内),并且如果结束日期晚于开始日期之后的一周,程序将显示一个如“挑选日历日期”小节中第10步的有效消息。否则,应用程序将显示一个如下图所示的错误消息。

    日历日期范围 - 无效输入的结果

改变日历风格样式

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

  1. 将图片文件 table_title_solid.gif 保存到您的项目文件夹 projects_directory\CalendarExample\web\resources 中。
  2. 在项目窗口中,双击 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 类”主题。
  3. 布署并运行该应用程序,然后打开弹出式日历。

    注意: 默认情况下,项目创建时即时编译功能是启用的,因此您在 IDE 中无需为运行应用程序而事先编译您的代码。更多关于即时编译功能的信息,请参见 创建、导入以及配置 Java 项目(英文) 手册的即时编译小节。

使用日历组件的技巧

  • 代码示例 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 表示)的几种组合。典型的分隔符有斜杠(/),句点(.),和短横线(-)。

总结

本教程中,您在一个 Visual Web JSF 页面中添加了一个日历组件,并且设置了最小和最大的日期。您还添加了一个验证组件,添加了用于验证用户选择的 End 日历组件的值至少为 Start 日历组件的值的一周之后。您还修改了日历的样式。


另请参阅


本页面最后一次更新时间:2008年10月29日