个性化阅读
专注于IT技术分析

RichFaces rich:calendar组件用法

本文概述

它用于通过弹出日历输入日期和时间。弹出日历可以浏览几个月和几年。我们还可以自定义其外观。

<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="#{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
@RequestScoped
public 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;
}
}

输出

RichFaces rich:calendar1

现在, 单击日历图标, 然后从弹出菜单中选择日期。

RichFaces rich:calendar2

选择日期之后。

RichFaces rich:calendar3

赞(0) 打赏
未经允许不得转载:srcmini » RichFaces rich:calendar组件用法
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏