本文概述
它是用于选择日期的输入组件。 <p:calendar>组件用于在JSF应用程序中创建日历。它包括各种功能, 例如:显示模式, 分页, 本地化, ajax选择等。
日历的值应为java.util.Date。
日历属性
下表包含”日历”组件的属性。
Attribute | Default value | Return type | Description |
---|---|---|---|
id | null | String | 它是组件的唯一标识符。 |
rendered | true | Boolean | 它需要布尔值来指定组件的呈现。 |
value | null | java.util.Date | 用于设置组件的值。 |
converter | null | Converter/String | 它采用为组件定义转换器的表达式或文字文本。 |
required | false | Boolean | 用于根据需要制作组件。 |
mindate | false | 日期或字符串 | 它用于设置日历的最小可见日期。 |
maxdate | null | 日期或字符串 | 它用于设置日历的最大可见日期。 |
pages | 1 | Integer | 它支持多页渲染。 |
mode | popup | String | 它用于定义日历的显示方式。 |
pattern | MM/dd/yyyy | String | 它用于设置DateFormat模式进行本地化。 |
timeZone | null | Time Zone | 它用于指定用于日期转换的时区。 |
showWeek | false | Boolean | 用于显示每个星期旁边的星期数。 |
disabledWeekends | false | Boolean | 它禁用周末专栏。 |
showOtherMonths | false | Boolean | 它显示属于其他月份的日期。 |
selectOtherMonths | false | Boolean | 它可以选择属于其他月份的日期。 |
yearRange | null | String | 用于设置年份范围。 |
timeOnly | false | Boolean | 它仅显示不带日期的时间选择器。 |
结构样式类
下表包含结构样式类。
样式类 | Applies |
---|---|
.ui-datepicker | 用于主容器。 |
.ui-datepicker-header | 用于标头容器。 |
.ui-datepicker-上一个 | 用于上个月的导航器。 |
.ui-datepicker-next | 用于下个月的导航器。 |
.ui-datepicker-title | 它用于标题。 |
.ui-datepicker-month | 用于月份显示。 |
.ui-datepicker-table | 它用于日期表。 |
.ui-datepicker-week-end | 此类用于标记周末。 |
.ui-datepicker-other-month | 属于其他月份的日期的类。 |
.ui-datepicker td | 它用于每个单元格日期。 |
.ui-datepicker-buttonpane | 这是按钮面板类。 |
.ui-datepicker-current | 此类用于”今天”按钮。 |
.ui-datepicker-关闭 | 用于显示关闭按钮。 |
例子
在下面的示例中, 我们正在实现<p: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">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Calendar Example</title>
</h:head>
<h:body>
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel for="inline" value="Select Date" />
<p:calendar id="inline" value="#{calendar.date}" mode="popup" />
</h:panelGrid>
</h:body>
</html>
ManagedBean
// Calendar.java
package com.srcmini;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
import org.primefaces.context.RequestContext;
import org.primefaces.event.SelectEvent;
@ManagedBean
public class Calendar {
private Date date;
public void onDateSelect(SelectEvent event) {
FacesContext facesContext = FacesContext.getCurrentInstance();
SimpleDateFormat format = new SimpleDateFormat("dd/MM/yyyy");
facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Date Selected", format.format(event.getObject())));
}
public void click() {
RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.update("form:display");
requestContext.execute("PF('dlg').show()");
}
public Date getDate() {
return date;
}
public void setDate(Date date) {
this.date = date;
}
}
运行JSF文件后, 它将产生以下输出。
输出
当我们在下面检查时, 它显示消息。
评论前必须登录!
注册