RichFaces rich（calendar组件用法） rich组件|RichFaces

本文概述

样式类和皮肤参数
例子

它用于通过弹出日历输入日期和时间。弹出日历可以浏览几个月和几年。我们还可以自定义其外观。
< rich：calendar> 组件只需要一个值属性即可保存当前选定的日期。
样式类和皮肤参数下表包含日历组件的样式类(选择器)和相应的外观参数。

Class	Function	皮肤参数	映射的CSS属性
.rf-cal-extr	它用于定义弹出式日历外观的样式。	panelBorderColor	border-color
.rf-cal-btn	它用于定义日历按钮的样式。	没有皮肤参数。
.rf-cal-hdr	它用于定义日历标题的样式。	panelBorderColor additionalBackgroundColor	border-bottom-color background-color
.rf-cal-hdr-optnl	它用于定义可选标题的样式。	AdditionalBackgroundColor generalSizeFont	背景颜色字体大小
.rf-cal-hdr-month	它用于定义月份标题的样式。	headerSizeFont headerFamilyFont	字体大小的字体族
.rf-cal-ftr	它用于定义日历页脚的样式。	AdditionalBackgroundColor generalSizeFont	background font-size
.rf-cal-ftr-optnl	它用于定义可选页脚的样式。	AdditionalBackgroundColor generalSizeFont	背景字体大小
.rf-cal-tl	它用于定义日历工具栏的样式。	headerSizeFont headerFamilyFont	字体大小的字体族
.rf-cal-tl-ftr	它用于定义日历页脚中工具栏项目的样式。	generalSizeFont generalFamilyFont	font-size font-family
.rf-cal-tl-btn	它用于定义工具栏按钮的样式。	没有皮肤参数。
.rf-cal-tl-btn-dis	它用于定义禁用的工具栏按钮的样式。	没有皮肤参数。
.rf-cal-tl-btn-hov	当鼠标指针悬停在工具栏上时, 它用于定义工具栏项目的样式。	calendarWeekBackgroundColor generalTextColor	背景色
.rf-cal-tl-btn-press	用于定义工具栏项目的样式。	panelBorderColor	右边框颜色, 下边框颜色
.rf-cal-tl-close	它用于为工具栏中的” 关闭” 按钮定义样式。	没有皮肤参数。
.rf-cal-c	它用于定义常规日历单元格的样式。	tableBackgroundColor generalSizeFont	background-color font-size
.rf-cal-c-cnt	它用于定义单元格内容的样式。	没有皮肤参数。

例子在下面的示例中, 我们正在实现< rich：calendar> 组件。本示例包含以下文件。
JSF文件
// calendar.xhtml

< ?xml version='1.0' encoding='UTF-8' ?> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < ui:composition xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://java.sun.com/jsf/html"xmlns:f="http://java.sun.com/jsf/core"xmlns:ui="http://java.sun.com/jsf/facelets"xmlns:a4j="http://richfaces.org/a4j"xmlns:rich="http://richfaces.org/rich"> < f:view> < h:head> < title> Calendar Example< /title> < /h:head> < h:body> < h:form> < h1> Calendar< /h1> < rich:calendar value="http://www.srcmini.com/#{calendar.selectedDate}"locale="#{calendar.locale}"popup="#{calendar.popup}"datePattern="#{calendar.pattern}"style="width:200px"> < /rich:calendar> < /h:form> < /h:body> < /f:view> < /ui:composition>

托管豆
// Calendar.java

package com.srcmini.calendar; import java.text.DateFormat; import java.util.Date; import java.util.Locale; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; import javax.faces.event.ValueChangeEvent; @ManagedBean@RequestScopedpublic class Calendar {private static final String[] WEEK_DAY_LABELS = new String[] { "Sun *", "Mon +", "Tue +", "Wed +", "Thu +", "Fri +", "Sat *" }; private Locale locale; private boolean popup; private boolean readonly; private boolean showInput; private boolean enableManualInput; private String pattern; private Date currentDate; private Date selectedDate; private String jointPoint; private String direction; private String boundary; private boolean useCustomDayLabels; public Locale getLocale() {return locale; }public void setLocale(Locale locale) {this.locale = locale; }public boolean isPopup() {return popup; }public void setPopup(boolean popup) {this.popup = popup; }public String getPattern() {return pattern; }public void setPattern(String pattern) {this.pattern = pattern; }public Calendar() {locale = Locale.US; popup = true; pattern = "MMM d, yyyy"; jointPoint = "bottomleft"; direction = "bottomright"; readonly = true; enableManualInput=false; showInput=true; boundary = "inactive"; }public boolean isShowInput() {return showInput; }public void setShowInput(boolean showInput) {this.showInput = showInput; }public boolean isEnableManualInput() {return enableManualInput; }public void setEnableManualInput(boolean enableManualInput) {this.enableManualInput = enableManualInput; }public boolean isReadonly() {return readonly; }public void setReadonly(boolean readonly) {this.readonly = readonly; }public void selectLocale(ValueChangeEvent event) {String tLocale = (String) event.getNewValue(); if (tLocale != null) {String lang = tLocale.substring(0, 2); String country = tLocale.substring(3); locale = new Locale(lang, country, ""); }}public boolean isUseCustomDayLabels() {return useCustomDayLabels; }public void setUseCustomDayLabels(boolean useCustomDayLabels) {this.useCustomDayLabels = useCustomDayLabels; }public Object getWeekDayLabelsShort() {if (isUseCustomDayLabels()) {return WEEK_DAY_LABELS; } else {return null; }}public String getCurrentDateAsText() {Date currentDate = getCurrentDate(); if (currentDate != null) {return DateFormat.getDateInstance(DateFormat.FULL).format(currentDate); }return null; }public Date getCurrentDate() {return currentDate; }public void setCurrentDate(Date currentDate) {this.currentDate = currentDate; }public Date getSelectedDate() {return selectedDate; }public void setSelectedDate(Date selectedDate) {this.selectedDate = selectedDate; }public String getJointPoint() {return jointPoint; }public void setJointPoint(String jointPoint) {this.jointPoint = jointPoint; }public void selectJointPoint(ValueChangeEvent event) {jointPoint = (String) event.getNewValue(); }public String getDirection() {return direction; }public void setDirection(String direction) {this.direction = direction; }public void selectDirection(ValueChangeEvent event) {direction = (String) event.getNewValue(); }public String getBoundary() {return boundary; }public void setBoundary(String boundary) {this.boundary = boundary; }}

输出