PrimeFaces calendar例子

本文概述

  • 日历属性
  • 结构样式类
  • 例子
它是用于选择日期的输入组件。 < 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="http://www.srcmini.com/Select Date" /> < p:calendar id="inline" value="http://www.srcmini.com/#{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; } }

【PrimeFaces calendar例子】运行JSF文件后, 它将产生以下输出。
输出
PrimeFaces calendar例子

文章图片
当我们在下面检查时, 它显示消息。
PrimeFaces calendar例子

文章图片

    推荐阅读