srcmini本文概述
它用于通过弹出日历输入日期和时间。弹出日历可以浏览几个月和几年。我们还可以自定义其外观。
<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;
}
}输出
现在, 单击日历图标, 然后从弹出菜单中选择日期。
选择日期之后。
评论前必须登录！
注册