RichFaces <rich:calendar>

17 Mar 2025 | 4 分钟阅读

它用于通过弹出日历输入日期和时间。弹出日历可以在月份和年份之间导航。我们还可以自定义其外观。

<rich:calendar> 组件只需要一个值属性，该属性保存当前选定的日期。

样式类和皮肤参数

下表包含日历组件的样式类（选择器）和相应的皮肤参数。

Class	函数	皮肤参数	映射的 CSS 属性
.rf-cal-extr	它用于定义弹出日历外部的样式。	panelBorderColor	边框颜色
.rf-cal-btn	它用于定义日历按钮的样式。	无皮肤参数。
.rf-cal-hdr	它用于定义日历标题的样式。	panelBorderColor additionalBackgroundColor	border-bottom-color background-color
.rf-cal-hdr-optnl	它用于定义可选标题的样式。	additionalBackgroundColor generalSizeFont	background-color font-size
.rf-cal-hdr-month	它用于定义月份标题的样式。	headerSizeFont headerFamilyFont	字体大小字体系列
.rf-cal-ftr	它用于定义日历页脚的样式。	additionalBackgroundColor generalSizeFont	background font-size
.rf-cal-ftr-optnl	它用于定义可选页脚的样式。	additionalBackgroundColor generalSizeFont	background font-size
.rf-cal-tl	它用于定义日历工具栏的样式。	headerSizeFont headerFamilyFont	字体大小字体系列
.rf-cal-tl-ftr	它用于定义日历页脚中工具栏项的样式。	generalSizeFont generalFamilyFont	字体大小字体系列
.rf-cal-tl-btn	它用于定义工具栏按钮的样式。	无皮肤参数。
.rf-cal-tl-btn-dis	它用于定义已禁用工具栏按钮的样式。	无皮肤参数。
.rf-cal-tl-btn-hov	它用于定义工具栏项在鼠标光标悬停时的样式。	calendarWeekBackgroundColor generalTextColor	background-color color
.rf-cal-tl-btn-press	它用于定义工具栏项被按下时的样式。	panelBorderColor	border-right-color, border-bottom-color
.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>

托管 Bean

// Calendar.java

package com.javatpoint.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:editor>

RichFaces <rich:calendar>

样式类和皮肤参数

示例

JSF 文件

托管 Bean

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

RichFaces 教程

Ajax 组件

皮肤和主题

UI 组件

面试题

RichFaces <rich:calendar>

样式类和皮肤参数

示例

JSF 文件

托管 Bean

相关帖子

rich:dataTable

rich:autocomplete

rich:inplaceSelect

rich:inplaceInput

rich:collapsibleSubTable

rich:inputNumberSlider

rich:notifyMessage

rich:dropDownMenu

rich:select

rich:dataScroller

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器