当前位置：theitroad>Primefaces日历组件示例教程

Primefaces日历组件示例教程

时间：2020-02-23 14:41:37 　来源:igfitidea点击:

在之前的教程中，我们介绍了几种类型的Primefaces组件，例如Primefaces仪表板和Primefaces AccordionPanel。
本教程旨在为您提供有关如何使用日历组件的完整说明。
本教程倾向于为您提供一个配置为使用JSF/Primefaces库的Maven项目。
如果您以前曾经配置过Maven项目以使用Primefaces，那么寻找JSF/Primefaces简介就很重要。

日历组件是一种输入组件，用于选择具有显示模式，分页，本地化和Ajax选择等功能的日期。

日历基本信息

TagInfo
Component Classorg.primefaces.component.calendar.Calendar
Component Typeorg.primefaces.component.Calendar
Component Familyorg.primefaces.component
Renderer Typeorg.primefaces.component.CalendarRenderer
Renderer Classorg.primefaces.component.calendar.CalendarRenderer

日历属性

NameDefaultTypeDescription
idnullStringUnique identifier of the component
renderedtrueBooleanBoolean value to specify the rendering of the component.
bindingnullObjectAn el expression that maps to a server side
valuenulljava.util.DateValue of the component
converternullConverter/StringAn el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id
immediatefalseBooleanWhen set true, process validations logic is executed at apply request values phase for this component.
requiredfalseBooleanMarks component as required
validatornullMethodExprA method expression that refers to a method validating the input
valueChangeListenernullMethodExprA method expression that refers to a method for handling a valueChangeEvent
requiredMessagenullStringMessage to be displayed when required field validation fails
converterMessagenullStringMessage to be displayed when conversion fails.
validatorMessagenullStringMessage to be displayed when validation fails.
widgetVarnullStringName of the client side widget.
mindatenullDate or StringSets calendar's minimum visible date
maxdatenullDate or StringSets calendar's maximum visible date
pages1IntegerEnables multiple page rendering.
disabledfalseBooleanDisables the calendar when set to true.
modepopupStringDefines how the calendar will be displayed.
patternMM/dd/yyyyStringDateFormat pattern for localization
localenullObjectLocale to be used for labels and conversion.
popupIconnullStringIcon of the popup button
popupIconOnlyfalseBooleanWhen enabled, popup icon is rendered without the button
navigatorfalseBooleanEnables month/year navigator
timeZonenullTimeZoneString or a java.util.TimeZone instance to specify the timezone used for date conversion, defaults to TimeZone.getDefault()
readonlyInputfalseBooleanMakes input text of a popup calendar readonly.
showButtonPanelfalseBooleanVisibility of button panel containing today and done buttons.
effectnullStringEffect to use when displaying and showing the popup calendar.
effectDurationnormalStringDuration of the effect.
showOnbothStringClient side event that displays the popup calendar.
showWeekfalseBooleanDisplays the week number next to each week.
disabledWeekendsfalseBooleanDisables weekend columns.
showOtherMonthsfalseBooleanDisplays days belonging to other months.
selectOtherMonthsfalseBooleanEnables selection of days belonging to other months
yearRangenullStringYear range for the navigator, default "c-10:c+10";
timeOnlyfalseBooleanShows only timepicker without date.
stepHour1IntegerHour steps.
stepMinute1IntegerMinute steps.
stepSecond1IntegerSecond steps.
minHour0IntegerMinimum boundary for hour selection.
maxHour23IntegerMaximum boundary for hour selection.
minMinute0IntegerMinimum boundary for minute selection.
maxMinute59IntegerMaximum boundary for hour selection.
minSecond0IntegerMinimum boundary for second selection.
maxSecond59IntegerMaximum boundary for second selection.
pagedatenullObjectInitial date to display if value is null.
accesskeynullStringAccess key that when pressed transfers focus to the input element.
altnullStringAlternate textual description of the input field.
autocompletenullStringControls browser autocomplete behavior.
dirnullStringDirection indication for text that does not inherit directionality. Valid values are LTR and RTL.
labelnullStringA localized user presentable name.
langnullStringCode describing the language used in the generated markup for this component.
maxlengthnullIntegerMaximum number of characters that Jan be entered in this field.
onblurnullStringClient side callback to execute when input element loses focus.
onchangenullStringClient side callback to execute when input element loses focus and its value has been modified since gaining focus.
onclicknullStringClient side callback to execute onclick event.
ondblclicknullStringClient side callback to execute when input element is double clicked.
onfocusnullStringClient side callback to execute when input element receives focus.
onkeydownnullStringClient side callback to execute when a key is pressed down over input element.
onkeypressnullStringClient side callback to execute when a key is pressed and released over input element.
onkeyupnullStringClient side callback to execute when a key is released over input element.
onmousedownnullStringClient side callback to execute when a pointer button is pressed down over input element.
onmousemovenullStringClient side callback to execute when a pointer button is moved within input element.
onmouseoutnullStringClient side callback to execute when a pointer button is moved away from input element.
onmouseovernullStringClient side callback to execute when a pointer button is moved onto input element.
onmouseupnullStringClient side callback to execute when a pointer button is released over input element.
onselectnullStringClient side callback to execute when text within input element is selected by user.
placeholdernullStringSpecifies a short hint.
readonlyfalseBooleanFlag indicating that this component will prevent changes by the user.
stylenullStringInline style of the component.
styleClassnullStringStyle class of the component.
sizenullIntegerNumber of characters used to determine the width of the input element.
tabindexnullIntegerPosition of the input element in the tabbing order.
titlenullStringAdvisory tooltip informaton.
beforeShowDaynullStringClient side callback to execute before displaying a date, used to customize date display.
masknullStringApplies a mask using the pattern.

日历入门

为了正确使用Calendar组件，必须为Date对象分配value属性。
如您在下面看到的。

上面的演示是通过使用以下Primefaces视图和CalendarManagedBean实现的。

index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
	<h:head>
		<title>Calendar</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<h:body>
	<div style="height:500px">
		<h:form>
			<p:calendar value="#{calendarManagedBean.date}"></p:calendar>
		</h:form>
		</div>
	</h:body>
</html>

package com.theitroad.primefaces.beans;

import java.util.Date;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class CalendarManagedBean {
	private Date date = new Date();

	public Date getDate() {
		return date;
	}

	public void setDate(Date date) {
		this.date = date;
	}
}

显示方式

日历有两种主要显示模式，弹出式(默认)和嵌入式。
以下示例将使用内联代码来澄清您的情况，因为您使用了默认值。

为了创建上述实例的Calendar组件，您必须实现Primefaces视图和如下的CalendarManagedBean。

index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
	<h:head>
		<title>Calendar</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<h:body>
	<div style="height:500px">
		<h:form>
			<p:calendar value="#{calendarManagedBean.date}" mode="inline"></p:calendar>
		</h:form>
		</div>
	</h:body>
</html>

package com.theitroad.primefaces.beans;

import java.util.Date;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class CalendarManagedBean {
	private Date date = new Date();

	public Date getDate() {
		return date;
	}

	public void setDate(Date date) {
		this.date = date;
	}
}

如果您使用的是弹出式默认视图类型，则可以控制触发日历后显示的事件。
上面列出的ShowOn属性定义了客户端事件以显示日历。
有效值为：

  • focus：输入字段获得焦点时。

  • 按钮：单击弹出按钮时。

  • 两者[默认]：焦点和按钮情况。

您已经在经历默认行为，着眼于日历输入会导致日历组件的显示。
这次我们将显示模式置于弹出窗口，同时我们将提供一个用于showOn属性的按钮。
让我们看下面的结果：

如上所述，如果设置了焦点，则"日历"组件将永远不会显示，而是单击旁边附带的按钮后就会显示出来。
这是因为showOn =" button"。
让我们看一下所需的Primefaces视图和CalendarManagedBean。

index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
	<h:head>
		<title>Calendar</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<h:body>
	<div style="height:500px">
		<h:form>
			<p:calendar value="#{calendarManagedBean.date}" showOn="button"></p:calendar>
		</h:form>
		</div>
	</h:body>
</html>

package com.theitroad.primefaces.beans;

import java.util.Date;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class CalendarManagedBean {
	private Date date = new Date();

	public Date getDate() {
		return date;
	}

	public void setDate(Date date) {
		this.date = date;
	}

}

日历分页

日历也可以呈现在多个页面中，其中每个页面对应一个月。
此功能通过pages属性进行调整。

一旦日历组件成为焦点，而不是查看一个月，而是根据页面属性显示三个月。
让我们看一下所需的Primefaces视图更改。

index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
	<h:head>
		<title>Calendar</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<h:body>
	<div style="height:500px">
		<h:form>
			<p:calendar value="#{calendarManagedBean.date}" pages="3"></p:calendar>
		</h:form>
		</div>
	</h:body>
</html>

日历本地化

日历组件支持多种语言环境，因为其默认本地化取决于视图的语言环境本身。
但是，通过提供可以将语言环境键作为String或者java.util.locale实例的locale属性，可以覆盖默认值。

对于本地化的日历组件，您应该按照以下步骤操作：

  • 从此处下载您的语言环境翻译。
    默认情况下，日历组件的标签语言为英语，并且由于Primefaces不包含语言翻译，因此您需要手动向页面添加必要的翻译。
    此处提供的链接将带您进入社区驱动的页面，该页面可帮助您获取所需的翻译。
    转换是一个简单JavaScript对象，您可以使用<script 标记将其添加到页面中。

  • 使用Calendar组件的locale属性指定所需的语言环境。

下面的演示向您展示了三个日历组件，分别接受了德语，英语和法语的本地化。

现在，让我们看一下项目目录，JavaScript文件和Primefaces视图本身。

index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
	<h:head>
		<title>Calendar</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
		<script type="text/javascript" src="de.js"></script>
		<script type="text/javascript" src="fr.js"></script>
		<script type="text/javascript" src="en.js"></script>
	</h:head>
	<h:body>
	<div style="height:500px">
		<h:form>
			<p:calendar value="#{calendarManagedBean.date}" locale="de"></p:calendar>
			<p:calendar value="#{calendarManagedBean.date}" locale="en"></p:calendar>
			<p:calendar value="#{calendarManagedBean.date}" locale="fr"></p:calendar>
		</h:form>
	</div>
	</h:body>
</html>

de.js

PrimeFaces.locales['de'] = {
  closeText: 'Schließen',
  prevText: 'Zurück',
  nextText: 'Weiter',
  monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
  monthNamesShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
  dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
  dayNamesShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],
  dayNamesMin: ['S', 'M', 'D', 'M ', 'D', 'F ', 'S'],
  weekHeader: 'Woche',
  firstDay: 1,
  isRTL: false,
  showMonthAfterYear: false,
  yearSuffix: '',
  timeOnlyTitle: 'Nur Zeit',
  timeText: 'Zeit',
  hourText: 'Stunde',
  minuteText: 'Minute',
  secondText: 'Sekunde',
  currentText: 'Aktuelles Datum',
  ampm: false,
  month: 'Monat',
  week: 'Woche',
  day: 'Tag',
  allDayText: 'Ganzer Tag'
};

fr.js

PrimeFaces.locales ['fr'] = {
  closeText: 'Fermer',
  prevText: 'Précédent',
  nextText: 'Suivant',
  monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ],
  monthNamesShort: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc' ],
  dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
  dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
  dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
  weekHeader: 'Semaine',
  firstDay: 1,
  isRTL: false,
  showMonthAfterYear: false,
  yearSuffix:'',
  timeOnlyTitle: 'Choisir l\'heure',
  timeText: 'Heure',
  hourText: 'Heures',
  minuteText: 'Minutes',
  secondText: 'Secondes',
  currentText: 'Maintenant',
  ampm: false,
  month: 'Mois',
  week: 'Semaine',
  day: 'Jour',
  allDayText: 'Toute la journée'
};

en.js

PrimeFaces.locales ['en_US'] = {
  closeText: 'Close',
  prevText: 'Previous',
  nextText: 'Next',
  monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ],
  monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
  dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Tue', 'Fri', 'Sat'],
  dayNamesMin: ['S', 'M', 'T', 'W ', 'T', 'F ', 'S'],
  weekHeader: 'Week',
  firstDay: 1,
  isRTL: false,
  showMonthAfterYear: false,
  yearSuffix:'',
  timeOnlyTitle: 'Only Time',
  timeText: 'Time',
  hourText: 'Time',
  minuteText: 'Minute',
  secondText: 'Second',
  currentText: 'Current Date',
  ampm: false,
  month: 'Month',
  week: 'week',
  day: 'Day',
  allDayText: 'All Day',
  messages: {
      'javax.faces.component.UIInput.REQUIRED': '{0}: Validation Error: Value is required.',
      'javax.faces.converter.IntegerConverter.INTEGER': '{2}: \'{0}\' must be a number consisting of one or more digits.',
      'javax.faces.converter.IntegerConverter.INTEGER_detail': '{2}: \'{0}\' must be a number between -2147483648 and 2147483647 Example: {1}',
      'javax.faces.converter.DoubleConverter.DOUBLE': '{2}: \'{0}\' must be a number consisting of one or more digits.',
      'javax.faces.converter.DoubleConverter.DOUBLE_detail': '{2}: \'{0}\' must be a number between 4.9E-324 and 1.7976931348623157E308  Example: {1}',
      'javax.faces.converter.BigDecimalConverter.DECIMAL': '{2}: \'{0}\' must be a signed decimal number.',
      'javax.faces.converter.BigDecimalConverter.DECIMAL_detail': '{2}: \'{0}\' must be a signed decimal number consisting of zero or more digits, that Jan be followed by a decimal point and fraction.  Example: {1}',
      'javax.faces.converter.BigIntegerConverter.BIGINTEGER': '{2}: \'{0}\' must be a number consisting of one or more digits.',
      'javax.faces.converter.BigIntegerConverter.BIGINTEGER_detail': '{2}: \'{0}\' must be a number consisting of one or more digits. Example: {1}',
      'javax.faces.converter.ByteConverter.BYTE': '{2}: \'{0}\' must be a number between 0 and 255.',
      'javax.faces.converter.ByteConverter.BYTE_detail': '{2}: \'{0}\' must be a number between 0 and 255.  Example: {1}',
      'javax.faces.converter.CharacterConverter.CHARACTER': '{1}: \'{0}\' must be a valid character.',
      'javax.faces.converter.CharacterConverter.CHARACTER_detail': '{1}: \'{0}\' must be a valid ASCII character.',
      'javax.faces.converter.ShortConverter.SHORT': '{2}: \'{0}\' must be a number consisting of one or more digits.',
      'javax.faces.converter.ShortConverter.SHORT_detail': '{2}: \'{0}\' must be a number between -32768 and 32767 Example: {1}',
      'javax.faces.converter.BooleanConverter.BOOLEAN': '{1}: \'{0}\' must be \'true\' or \'false\'',
      'javax.faces.converter.BooleanConverter.BOOLEAN_detail': '{1}: \'{0}\' must be \'true\' or \'false\'.  Any value other than \'true\' will evaluate to \'false\'.',
      'javax.faces.validator.LongRangeValidator.MAXIMUM': '{1}: Validation Error: Value is greater than allowable maximum of \'{0}\'',
      'javax.faces.validator.LongRangeValidator.MINIMUM': '{1}: Validation Error: Value is less than allowable minimum of \'{0}\'',
      'javax.faces.validator.LongRangeValidator.NOT_IN_RANGE': '{2}: Validation Error: Specified attribute is not between the expected values of {0} and {1}.',
      'javax.faces.validator.LongRangeValidator.TYPE={0}': 'Validation Error: Value is not of the correct type.',
      'javax.faces.validator.DoubleRangeValidator.MAXIMUM': '{1}: Validation Error: Value is greater than allowable maximum of \'{0}\'',
      'javax.faces.validator.DoubleRangeValidator.MINIMUM': '{1}: Validation Error: Value is less than allowable minimum of \'{0}\'',
      'javax.faces.validator.DoubleRangeValidator.NOT_IN_RANGE': '{2}: Validation Error: Specified attribute is not between the expected values of {0} and {1}',
      'javax.faces.validator.DoubleRangeValidator.TYPE={0}': 'Validation Error: Value is not of the correct type',
      'javax.faces.converter.FloatConverter.FLOAT': '{2}: \'{0}\' must be a number consisting of one or more digits.',
      'javax.faces.converter.FloatConverter.FLOAT_detail': '{2}: \'{0}\' must be a number between 1.4E-45 and 3.4028235E38  Example: {1}',
      'javax.faces.converter.DateTimeConverter.DATE': '{2}: \'{0}\' could not be understood as a date.',
      'javax.faces.converter.DateTimeConverter.DATE_detail': '{2}: \'{0}\' could not be understood as a date. Example: {1}',
      'javax.faces.converter.DateTimeConverter.TIME': '{2}: \'{0}\' could not be understood as a time.',
      'javax.faces.converter.DateTimeConverter.TIME_detail': '{2}: \'{0}\' could not be understood as a time. Example: {1}',
      'javax.faces.converter.DateTimeConverter.DATETIME': '{2}: \'{0}\' could not be understood as a date and time.',
      'javax.faces.converter.DateTimeConverter.DATETIME_detail': '{2}: \'{0}\' could not be understood as a date and time. Example: {1}',
      'javax.faces.converter.DateTimeConverter.PATTERN_TYPE': '{1}: A \'pattern\' or \'type\' attribute must be specified to convert the value \'{0}\'',
      'javax.faces.converter.NumberConverter.CURRENCY': '{2}: \'{0}\' could not be understood as a currency value.',
      'javax.faces.converter.NumberConverter.CURRENCY_detail': '{2}: \'{0}\' could not be understood as a currency value. Example: {1}',
      'javax.faces.converter.NumberConverter.PERCENT': '{2}: \'{0}\' could not be understood as a percentage.',
      'javax.faces.converter.NumberConverter.PERCENT_detail': '{2}: \'{0}\' could not be understood as a percentage. Example: {1}',
      'javax.faces.converter.NumberConverter.NUMBER': '{2}: \'{0}\' could not be understood as a date.',
      'javax.faces.converter.NumberConverter.NUMBER_detail': '{2}: \'{0}\' is not a number. Example: {1}',
      'javax.faces.converter.NumberConverter.PATTERN': '{2}: \'{0}\' is not a number pattern.',
      'javax.faces.converter.NumberConverter.PATTERN_detail': '{2}: \'{0}\' is not a number pattern. Example: {1}',
      'javax.faces.validator.LengthValidator.MINIMUM': '{1}: Validation Error: Length is less than allowable minimum of \'{0}\'',
      'javax.faces.validator.LengthValidator.MAXIMUM': '{1}: Validation Error: Length is greater than allowable maximum of \'{0}\'',
      'javax.faces.validator.RegexValidator.PATTERN_NOT_SET': 'Regex pattern must be set.',
      'javax.faces.validator.RegexValidator.PATTERN_NOT_SET_detail': 'Regex pattern must be set to non-empty value.',
      'javax.faces.validator.RegexValidator.NOT_MATCHED': 'Regex Pattern not matched',
      'javax.faces.validator.RegexValidator.NOT_MATCHED_detail': 'Regex pattern of \'{0}\' not matched',
      'javax.faces.validator.RegexValidator.MATCH_EXCEPTION': 'Error in regular expression.',
      'javax.faces.validator.RegexValidator.MATCH_EXCEPTION_detail': 'Error in regular expression, \'{0}\''
  }
};

Ajax行为事件

日历提供了一个dateSelect ajax行为事件，以便在选择数据时立即执行ajax选择。
如果您将方法定义为侦听器，则将通过传递org.primefaces.event.SelectEvent实例来调用该方法。

看下面的示范

现在，让我们看看完成该工作所需的所有文件。

index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
	<h:head>
		<title>Calendar</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<h:body>
	<div style="height:500px">
		<h:form>
			<p:calendar value="#{calendarManagedBean.date}">
				<p:ajax event="dateSelect" listener="#{calendarManagedBean.dateSelectedAction}"></p:ajax>
			</p:calendar>
		</h:form>
	</div>
	</h:body>
</html>

package com.theitroad.primefaces.beans;

import java.util.Date;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.event.SelectEvent;

@ManagedBean
@SessionScoped
public class CalendarManagedBean {
	private Date date = new Date();

	public Date getDate() {
		return date;
	}

	public void setDate(Date date) {
		this.date = date;
	}

	public void dateSelectedAction(SelectEvent e){
		Date date = (Date)e.getObject();
		System.out.println("Date Selected Is ::"+date);
	}
}

这里提到的一个重要注意事项：如果您将弹出窗口用作模式值，则支持常规的ajax行为事件，例如：模糊，抠像等

日期范围

使用mindate和maxdate选项可以限制可选日期。
这些属性的值可以是String或者java.util.Date。

就像您在下面看到的那样，我们在14/06/20到06/20/15之间列出了可用日期，因此日历不允许用户导航到指定范围之外。

您已经注意到，没有办法超过日期期限。
现在，让我们看一下所需的文件。

index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
	<h:head>
		<title>Calendar</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<h:body>
	<div style="height:500px">
		<h:form>
			<p:calendar value="#{calendarManagedBean.date}" mindate="06/20/14" maxdate="06/20/15"></p:calendar>
		</h:form>
	</div>
	</h:body>
</html>

高级定制

使用JavaScript.beforeShowDay回调自定义每个日期的外观。
回调JavaScript方法应返回一个包含两个值的数组。
第一个值将用于确定日期是启用还是禁用，而第二个值应用于确定日期的样式。
下面的演示将向您展示如何使用回调方法禁用Calendar组件中的所有日期。

在下面的Primefaces视图中已经提到了我们需要进行的像自定义这样的所有应用。

index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
	<h:head>
		<title>Calendar</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
		<script>
			function beforeShowDate(date){
				console.log(date.getMonth());
				return [false,''];
			}
		</script>
	</h:head>
	<h:body>
	<div style="height:500px">
		<h:form>
			<p:calendar value="#{calendarManagedBean.date}" beforeShowDay="beforeShowDate"></p:calendar>
		</h:form>
	</div>
	</h:body>
</html>

客户端API

最后，Primefaces提供了一个称为PF的隐式对象。
所有希望通过使用JavaScript客户端代码来控制日历的人都可以使用PF隐式对象。

Primefaces为您提供了可以针对Calendar对象以及通过PF对象调用的四种方法。

  • getDate()：返回所选日期。

  • setDate(DateAsParameter)：设置显示日期。

  • disable：禁用日历

  • enable：启用日历。

让我们看下面有关上述各个方法的演示：

  • 上图显示了调用getDate()的结果。

  • 上图显示了setDate()的结果，我们已经将日期设置为20/6/2014。

  • 对于其余两种方法，将分别禁用和启用日历输入。
    这样一来，在重新启用输入组件之前，用户将无法集中精力。

将附加的源代码导入到您的IDE中

许多开发人员在将此处附加的源代码导入其IDE时可能会遇到问题。
对于遭受此类问题困扰的人，本节为他们介绍了这一部分。

为了顺利导入附件的源代码，请确保遵循以下步骤：

  • 打开您的Eclipse IDE。
    我们使用了最新的Eclipse Kepler 4.3。

  • 在项目浏览器中，右键单击-选择Import并再次导入将导致打开导入向导。

  • 在Maven节点中，选择Existing Maven Project。

  • 点击下一步，浏览您项目的根目录。
    在我们的案例中，我们浏览了Primemes-Calendar-Sample，然后单击Okay。

  • 请稍等片刻，直到向导识别出位于此处的pom.xml文件。

  • 确保选择了pom.xml，然后单击下一步完成。

  • 您可能会遇到一些错误，这些错误是关于缺少配置或者缺少库的信息，如下所示。

  • 不要关注它们，因为您是在Eclipse试图将项目读取为Dynamic Web Project时使用Maven创建项目的。

  • 选择所有这些错误并将其删除，然后从项目菜单中选择清理。

  • 如果您的JDK配置正确，您将获得清晰的结果。

  • 只需将WAR部署到任何符合Java EE的容器中，并通过研究Calendar组件来取乐。

相关推荐

Kruskal的查找最小生成树的算法

Kruskal的查找最小生成树的算法

线性搜索算法及其C语言实现

线性搜索算法及其C语言实现

链接列表插入删除方法

链接列表插入删除方法

链接列表循环检测– Floyd的循环查找算法

链接列表循环检测– Floyd的循环查找算法

相关推荐
最近更新
标签