PrimeFaces 日历

2025年3月17日 | 阅读 3 分钟

它是一个用于选择日期的输入组件。 <p:calendar> 组件用于在 JSF 应用程序中创建日历。它包括各种功能，例如：显示模式、分页、本地化、ajax 选择等。

日历的值应该是一个 java.util.Date。

日历属性

下表包含日历组件的属性。

属性	默认值	返回类型	描述
id	null	String	它是组件的唯一标识符。
rendered	true	Boolean	它接受布尔值来指定组件的渲染。
值	null	java.util.Date	它用于设置组件的值。
转换器	null	转换器/字符串	它接受一个表达式或文字文本，用于定义组件的转换器。
必需	false	Boolean	用于将组件设置为必需。
mindate	false	日期或字符串	用于设置日历的最小可见日期。
maxdate	null	日期或字符串	用于设置日历的最大可见日期。
pages	1	Integer	启用多页渲染。
mode	popup	String	用于定义日历的显示方式。
pattern	MM/dd/yyyy	String	用于设置本地化的 DateFormat 模式。
timeZone	null	时区	用于指定用于日期转换的时区。
showWeek	false	Boolean	用于在每周旁边显示周数。
disabledWeekends	false	Boolean	禁用周末列。
showOtherMonths	false	Boolean	显示属于其他月份的日期。
selectOtherMonths	false	Boolean	启用选择属于其他月份的日期。
yearRange	null	String	用于设置年份范围。
timeOnly	false	Boolean	仅显示时间选择器，不显示日期。

皮肤

下表包含结构样式类。

样式类	应用
.ui-datepicker	用于主容器。
.ui-datepicker-header	用于标题容器。
.ui-datepicker-prev	用于上个月导航器。
.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-close	用于显示关闭按钮。

示例

在这里，在下面的示例中，我们正在实现 <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.javatpoint;
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 文件后，它会生成以下输出。

输出

当您检查它时，它会显示消息，如下所示。

下一主题PrimeFaces SelectCheckboxMenu

← 上一步下一步 →

PrimeFaces 日历

日历属性

皮肤

示例

JSF 文件

ManagedBean

联系信息

关注我们

教程

面试题

在线编译器

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

PrimeFaces 教程

PrimeFaces Ajax

UI 组件

面试题

PrimeFaces 日历

日历属性

皮肤

示例

JSF 文件

ManagedBean

相关帖子

PF FieldSet

PF Editor

PF PieChart

PF InputSwitch

PF Keyboard

PF Steps

PF BooleanCheckbox

PF Tooltip

PF Inplace

PF Slider

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器