📅  最后修改于: 2021-01-08 12:24:28             🧑  作者: Mango
它用于通过弹出日历输入日期和时间。弹出日历可以浏览几个月和几年。我们还可以自定义其外观。
< rich:calendar >组件只需要一个值属性即可保存当前选定的日期。
下表包含日历组件的样式类(选择器)和相应的外观参数。
Class | Function | Skin Parameters | Mapped CSS properties |
---|---|---|---|
.rf-cal-extr | It is used to define the styles for a pop-up calendar exterior. | panelBorderColor | border-color |
.rf-cal-btn | It is used to define styles for a calendar button. | No skin parameters. | |
.rf-cal-hdr | It is used to define the styles for a calendar header. | panelBorderColor additionalBackgroundColor |
border-bottom-color background-color |
.rf-cal-hdr-optnl | It is used to define the styles for an optional header. | additionalBackgroundColor generalSizeFont |
background-color font-size |
.rf-cal-hdr-month | It is used to define the styles for the month header. | headerSizeFont headerFamilyFont |
font-size font-family |
.rf-cal-ftr | It is used to define the styles for a calendar footer. | additionalBackgroundColor generalSizeFont |
background font-size |
.rf-cal-ftr-optnl | It is used to define the styles for an optional footer. | additionalBackgroundColor generalSizeFont |
background font-size |
.rf-cal-tl | It is used to define the styles for calendar toolbars. | headerSizeFont headerFamilyFont |
font-size font-family |
.rf-cal-tl-ftr | It is used to define the styles for a toolbar item in the calendar footer. | generalSizeFont generalFamilyFont |
font-size font-family |
.rf-cal-tl-btn | It is used to define styles for a toolbar button. | No skin parameters. | |
.rf-cal-tl-btn-dis | It is used to define styles for a disabled toolbar button. | No skin parameters. | |
.rf-cal-tl-btn-hov | It is used to define the styles for toolbar items when it is hovered over with the mouse cursor. | calendarWeekBackgroundColor generalTextColor |
background-color color |
.rf-cal-tl-btn-press | It is used to define the styles for toolbar items when it is pressed. | panelBorderColor | border-right-color, border-bottom-color |
.rf-cal-tl-close | It is used to define styles for a Close button in a toolbar. | No skin parameters. | |
.rf-cal-c | It is used to define the styles for regular calendar cells. | tableBackgroundColor generalSizeFont |
background-color font-size |
.rf-cal-c-cnt | It is used to define styles for the content of a cell. | No skin parameters. |
在下面的示例中,我们正在实现< rich:calendar >组件。本示例包含以下文件。
// calendar.xhtml
Calendar Example
Calendar
// 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;
}
}
输出:
现在,单击日历图标,然后从弹出菜单中选择日期。
选择日期之后。