primefaces教程_Primefaces日历组件示例教程

primefaces教程

In our previous tutorials, we’ve covered several types of Primefaces components such as Primefaces Dashboard and Primefaces AccordionPanel. This tutorial intended for providing you a full explanation of how Calendar component could be used. This tutorial tends to provide you a Maven project configured to use JSF/Primefaces library. If you’ve ever configured a Maven project for using Primefaces before, it’s important for you looking for JSF/Primefaces introduction.

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

Calendar component is an input component used to select a date featuring display modes, paging, localization and ajax selection and more.

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

日历基本信息 (Calendar Basic Info)

Tag	Info
Component Class	org.primefaces.component.calendar.Calendar
Component Type	org.primefaces.component.Calendar
Component Family	org.primefaces.component
Renderer Type	org.primefaces.component.CalendarRenderer
Renderer Class	org.primefaces.component.calendar.CalendarRenderer

标签	信息
组件类别	org.primefaces.component.calendar.Calendar
组件类型	org.primefaces.component.Calendar
组件族	org.primefaces.component
渲染器类型	org.primefaces.component.CalendarRenderer
渲染器类	org.primefaces.component.calendar.CalendarRenderer

日历属性 (Calendar Attributes)

Name	Default	Type	Description
id	null	String	Unique identifier of the component
rendered	true	Boolean	Boolean value to specify the rendering of the component.
binding	null	Object	An el expression that maps to a server side
value	null	java.util.Date	Value of the component
converter	null	Converter/String	An 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
immediate	false	Boolean	When set true, process validations logic is executed at apply request values phase for this component.
required	false	Boolean	Marks component as required
validator	null	MethodExpr	A method expression that refers to a method validating the input
valueChangeListener	null	MethodExpr	A method expression that refers to a method for handling a valueChangeEvent
requiredMessage	null	String	Message to be displayed when required field validation fails
converterMessage	null	String	Message to be displayed when conversion fails.
validatorMessage	null	String	Message to be displayed when validation fails.
widgetVar	null	String	Name of the client side widget.
mindate	null	Date or String	Sets calendar’s minimum visible date
maxdate	null	Date or String	Sets calendar’s maximum visible date
pages	1	Integer	Enables multiple page rendering.
disabled	false	Boolean	Disables the calendar when set to true.
mode	popup	String	Defines how the calendar will be displayed.
pattern	MM/dd/yyyy	String	DateFormat pattern for localization
locale	null	Object	Locale to be used for labels and conversion.
popupIcon	null	String	Icon of the popup button
popupIconOnly	false	Boolean	When enabled, popup icon is rendered without the button
navigator	false	Boolean	Enables month/year navigator
timeZone	null	TimeZone	String or a java.util.TimeZone instance to specify the timezone used for date conversion, defaults to TimeZone.getDefault()
readonlyInput	false	Boolean	Makes input text of a popup calendar readonly.
showButtonPanel	false	Boolean	Visibility of button panel containing today and done buttons.
effect	null	String	Effect to use when displaying and showing the popup calendar.
effectDuration	normal	String	Duration of the effect.
showOn	both	String	Client side event that displays the popup calendar.
showWeek	false	Boolean	Displays the week number next to each week.
disabledWeekends	false	Boolean	Disables weekend columns.
showOtherMonths	false	Boolean	Displays days belonging to other months.
selectOtherMonths	false	Boolean	Enables selection of days belonging to other months
yearRange	null	String	Year range for the navigator, default “c-10:c+10”
timeOnly	false	Boolean	Shows only timepicker without date.
stepHour	1	Integer	Hour steps.
stepMinute	1	Integer	Minute steps.
stepSecond	1	Integer	Second steps.
minHour	0	Integer	Minimum boundary for hour selection.
maxHour	23	Integer	Maximum boundary for hour selection.
minMinute	0	Integer	Minimum boundary for minute selection.
maxMinute	59	Integer	Maximum boundary for hour selection.
minSecond	0	Integer	Minimum boundary for second selection.
maxSecond	59	Integer	Maximum boundary for second selection.
pagedate	null	Object	Initial date to display if value is null.
accesskey	null	String	Access key that when pressed transfers focus to the input element.
alt	null	String	Alternate textual description of the input field.
autocomplete	null	String	Controls browser autocomplete behavior.
dir	null	String	Direction indication for text that does not inherit directionality. Valid values are LTR and RTL.
label	null	String	A localized user presentable name.
lang	null	String	Code describing the language used in the generated markup for this component.
maxlength	null	Integer	Maximum number of characters that may be entered in this field.
onblur	null	String	Client side callback to execute when input element loses focus.
onchange	null	String	Client side callback to execute when input element loses focus and its value has been modified since gaining focus.
onclick	null	String	Client side callback to execute onclick event.
ondblclick	null	String	Client side callback to execute when input element is double clicked.
onfocus	null	String	Client side callback to execute when input element receives focus.
onkeydown	null	String	Client side callback to execute when a key is pressed down over input element.
onkeypress	null	String	Client side callback to execute when a key is pressed and released over input element.
onkeyup	null	String	Client side callback to execute when a key is released over input element.
onmousedown	null	String	Client side callback to execute when a pointer button is pressed down over input element.
onmousemove	null	String	Client side callback to execute when a pointer button is moved within input element.
onmouseout	null	String	Client side callback to execute when a pointer button is moved away from input element.
onmouseover	null	String	Client side callback to execute when a pointer button is moved onto input element.
onmouseup	null	String	Client side callback to execute when a pointer button is released over input element.
onselect	null	String	Client side callback to execute when text within input element is selected by user.
placeholder	null	String	Specifies a short hint.
readonly	false	Boolean	Flag indicating that this component will prevent changes by the user.
style	null	String	Inline style of the component.
styleClass	null	String	Style class of the component.
size	null	Integer	Number of characters used to determine the width of the input element.
tabindex	null	Integer	Position of the input element in the tabbing order.
title	null	String	Advisory tooltip informaton.
beforeShowDay	null	String	Client side callback to execute before displaying a date, used to customize date display.
mask	null	String	Applies a mask using the pattern.

名称	默认	类型	描述
ID	空值	串	组件的唯一标识符
呈现	真正	布尔型	布尔值，用于指定组件的呈现。
捆绑	空值	目的	映射到服务器端的el表达式
值	空值	java.util.Date	组件的价值
转换器	空值	转换器/字符串	El表达式或文字文本，定义了组件的转换器。当是EL表达式时，它将解析为转换器实例。如果是静态文本，则必须引用转换器ID
即时	假	布尔型	设置为true时，将在此组件的应用请求值阶段执行流程验证逻辑。
需要	假	布尔型	根据需要标记组件
验证器	空值	方法专家	引用验证输入的方法的方法表达式
valueChangeListener	空值	方法专家	引用用于处理valueChangeEvent的方法的方法表达式
requiredMessage	空值	串	必填字段验证失败时显示的消息
converterMessage	空值	串	转换失败时显示的消息。
验证器消息	空值	串	验证失败时显示的消息。
widgetVar	空值	串	客户端小部件的名称。
注意	空值	日期或字符串	设置日历的最小可见日期
最大日期	空值	日期或字符串	设置日历的最大可见日期
页数	1个	整数	启用多页渲染。
残障人士	假	布尔型	设置为true时禁用日历。
模式	弹出	串	定义日历的显示方式。
模式	MM / dd / yyyy	串	用于本地化的DateFormat模式
地区	空值	目的	用于标签和转换的语言环境。
popupIcon	空值	串	弹出按钮的图标
popupIconOnly	假	布尔型	启用后，将显示没有按钮的弹出图标
航海家	假	布尔型	启用月/年导航器
时区	空值	时区	字符串或java.util.TimeZone实例以指定用于日期转换的时区，默认为TimeZone.getDefault（）
readonlyInput	假	布尔型	使弹出式日历的输入文本为只读。
showButtonPanel	假	布尔型	包含今天和完成按钮的按钮面板的可见性。
影响	空值	串	显示和显示弹出日历时使用的效果。
effectDuration	正常	串	效果的持续时间。
showOn	都	串	显示弹出日历的客户端事件。
showWeek	假	布尔型	在每个星期旁边显示星期数。
周末	假	布尔型	禁用周末专栏。
showOtherMonths	假	布尔型	显示属于其他月份的日期。
selectOtherMonths	假	布尔型	可以选择属于其他月份的日期
yearRange	空值	串	导航器的年份范围，默认为“ c-10：c + 10”
仅时间	假	布尔型	仅显示没有日期的时间选择器。
stepHour	1个	整数	小时的步骤。
stepMinute	1个	整数	分钟的步骤。
第二步	1个	整数	第二步。
分钟	0	整数	小时选择的最小边界。
最大小时数	23	整数	小时选择的最大边界。
minMinute	0	整数	分钟选择的最小边界。
maxMinute	59	整数	小时选择的最大边界。
分钟第二	0	整数	第二选择的最小边界。
maxSecond	59	整数	第二选择的最大边界。
页面日期	空值	目的	如果值为null，则显示的初始日期。
快捷键	空值	串	按下该访问键会将焦点转移到输入元素。
alt	空值	串	输入字段的替代文字描述。
自动完成	空值	串	控制浏览器的自动完成行为。
目录	空值	串	不继承方向性的文本的方向指示。有效值为LTR和RTL。
标签	空值	串	本地化的用户可显示名称。
郎	空值	串	描述此组件生成的标记中使用的语言的代码。
最长长度	空值	整数	在此字段中可以输入的最大字符数。
Onblur	空值	串	当输入元素失去焦点时执行客户端回调。
不断变化	空值	串	当输入元素失去焦点并且自获得焦点以来已修改其值时执行客户端回调。
点击	空值	串	客户端回调以执行onclick事件。
ondblclick	空值	串	双击输入元素时执行客户端回调。
专注	空值	串	当输入元素获得焦点时执行客户端回调。
按键	空值	串	在输入元素上按下键时执行客户端回调。
按键	空值	串	在输入元素上按下并释放键时执行的客户端回调。
按键	空值	串	在输入元素上释放键时执行的客户端回调。
鼠标停下	空值	串	当在输入元素上按下指针按钮时执行客户端回调。
情绪激动	空值	串	在输入元素内移动指针按钮时执行的客户端回调。
暂停	空值	串	当指针按钮从输入元素移开时执行客户端回调。
鼠标悬停	空值	串	当指针按钮移到输入元素上时执行客户端回调。
鼠标悬停	空值	串	在输入元素上释放指针按钮时执行的客户端回调。
选择	空值	串	用户选择输入元素中的文本时执行的客户端回调。
占位符	空值	串	指定简短提示。
只读	假	布尔型	指示此组件将阻止用户更改的标志。
样式	空值	串	组件的内联样式。
styleClass	空值	串	组件的样式类。
尺寸	空值	整数	用于确定输入元素宽度的字符数。
标签索引	空值	整数	输入元素在制表顺序中的位置。
标题	空值	串	咨询工具提示信息。
ShowShow之前	空值	串	在显示日期之前执行的客户端回调，用于自定义日期显示。
面具	空值	串	使用图案应用遮罩。

日历入门 (Getting Started With Calendar)

For using Calendar component properly, value attribute must be assigned for Date object. As you would see below.

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

The above demo has been achieved by using the following Primefaces view and CalendarManagedBean.

上面的演示是通过使用以下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.journaldev.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;}
}

显示方式 (Display Modes)

Calendar has two main display modes, popup (default) and inline. The below samples would clarify you using inline as you’ve used the default value.

日历有两种主要显示模式， 弹出窗口（默认）和嵌入式。下面的示例将阐明使用内联方法的原因，因为您使用了默认值。

For creating an instance Calendar component like above, you have to implement the Primefaces view and CalendarManagedBean like below.

为了创建上述实例的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.journaldev.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;}
}

In case you’ve used the popup default view type, you can control the event that you would your Calendar get displayed once it’s fired. ShowOn attribute listed above, defines the client side event to display the calendar. Valid values are:

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

focus: When input field receives focus.focus ：输入字段获得焦点时。
button: When the popup button is clicked.button ：单击弹出按钮时。
both [Default]: Both focus and button cases.两者[默认] ：焦点和按钮情况。

You’re already experiencing the default behavior, focusing on Calendar input get caused the Calendar component to be displayed. This time we’ve left the displaying mode into popup and at the same time we will provide a button for showOn attribute. Let’s see below what’s the result of:

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

As you’ve noticed above, the Calendar component has never shown if you set the focus, rather it would be displayed once you’ve clicked on the button that attached beside. That’s caused by showOn=”button”. Let’s see the required Primefaces view and the CalendarManagedBean.

正如您在上面注意到的那样，如果设置了焦点，则“日历”组件将永远不会显示，而是单击旁边附带的按钮后，它将显示出来。这是由于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.journaldev.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 Paging)

The calendar can also be rendered in multiple pages where each page corresponds to one month. This feature is tuned with the pages attribute.

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

Once the Calendar component is focused, instead of viewing one month, three months are displayed according to the pages attribute. Let’s see the required Primefaces view changes.

一旦日历组件成为焦点，而不是查看一个月，而是根据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>

日历本地化 (Calendar Localization)

Calendar component supported multiple kinds of locales as its default localization get determined by the view’s locale itself. However, default value can be overridden, by providing the locale attribute that can take a locale key as a String or a java.util.locale instance.

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

For localized the Calendar component you should follow the below steps:

对于本地化的日历组件，您应该遵循以下步骤：

Download your locale translation from here. By default, Calendar component’s language of labels are English and you need to add the necessary translations to your page manually as Primefaces doesn’t include language translations. The provided link here will lead you into a community-driven page that helps you get the required translation. The translation is a simple JavaScript object, as you can adding it into your page by using the <script/> tag.从此处下载您的语言环境翻译。默认情况下，Calendar组件的标签语言为英语，并且由于Primefaces不包含语言翻译，因此您需要手动向页面添加必要的翻译。此处提供的链接将带您进入社区驱动的页面，该页面可帮助您获取所需的翻译。转换是一个简单JavaScript对象，您可以使用<script />标记将其添加到页面中。
Specify the wanted locale by using the locale attribute onto Calendar component.通过使用Calendar组件上的locale属性来指定所需的语言环境。

The demonstration below shows you Three Calendar components have localized using German, English, and French receptively.

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

Now, let’s look at the project directory, JavaScript files and the Primefaces view itself.

现在，让我们看一下项目目录，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 may 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行为事件 (Ajax Behavior Events)

Calendar provides a dateSelect ajax behavior event to execute an instant ajax selection whenever a data is selected. If you define a method as a listener, it will be invoked by passing an org.primefaces.event.SelectEvent instance.

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

Look at the below demonstration

看下面的示范

By now, let’s see the all required files for doing that work.

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

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.journaldev.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);}
}

()

One important note mentioned here, In case you’ve used popup as a mode value, regular ajax behavior events like: blur, keyup and more are supported.

这里提到的一个重要注意事项： 如果将popup用作模式值，则支持常规的ajax行为事件，例如：blur，keyup等。

日期范围 (Date Ranges)

Using mindate and maxdate options, selectable dates can be restricted. Values for these attributes can be a String or java.util.Date.

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

As you would see below, we’ve enclosed the available dates between 06/20/14 to 06/20/15, so the calendar won’t allow the user to navigate out of specified scope.

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

As you’ve noticed, no way for exceeding the date period. Now, let’s look at the required files for doing that.

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

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>

高级定制 (Advanced Customization)

Use beforeShowDay JavaScript callback to customize the look of each date. The callback JavaScript method should return an array of two values; first value would be used for determining whether the date has enabled or disabled, while the second value should be used for determining the date’s style. The below demonstration will show you how could the callback method be used for disabling all the dates in the Calendar component.

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

And all that we need for applying like that customization has been mentioned in the below Primefaces view.

在下面的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 (Client Side API)

Finally, Primefaces has provided an implicit object called PF. It’s possible for all of those want controlling the Calendar through using of JavaScript client code to use the PF implicit object.

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

Primefaces provides you four methods can be invoked against Calendar object and through the PF object.

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

getDate(): return the selected date.getDate（）：返回选定的日期。
setDate(DateAsParameter): sets display date.setDate（DateAsParameter）：设置显示日期。
disable: Disables calendar.disable：禁用日历。
enable: Enable Calendar.enable：启用日历。

Let’s see the demonstrations below for respective above methods:

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

Figure above shows you the result of calling getDate().上图显示了调用getDate（）的结果。

Figure above shows you the result of setDate(), we already set the date to be 20/6/2014.上图显示了setDate（）的结果，我们已经将日期设置为20/6/2014。
For both remaining methods, the calendar input will be disabled and enabled respectively. And by that, the user won’t be able to focus the input component until it’s enabled again.对于其余两种方法，将分别禁用和启用日历输入。这样一来，在重新启用输入组件之前，用户将无法集中精力。

将附加的源代码导入到您的IDE中 (Import Attached Source Code Into Your IDE)

Many developers may face problems in getting the source code attached here imported into their IDE’s. For those suffering from issues like that, this section has been introduced for them.

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

For importing the attached source code smoothly, make sure that you follow the below steps:

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

Open your Eclipse IDE. We’ve used latest Eclipse Kepler 4.3.打开您的Eclipse IDE。我们使用了最新的Eclipse Kepler 4.3。
From the project explorer, by Right clicking on – choosing Import and Import again will cause an import wizard to be opened.在项目浏览器中，右键单击–再次选择“导入和导入”将导致打开导入向导。
From the Maven node, select Existing Maven Project.从Maven节点中，选择“现有Maven项目”。

Click next and browsing your project’s root directory. In our case we’ve browsing Primefaces-Calendar-Sample and click Okay.单击下一步，浏览项目的根目录。在本例中，我们浏览了Primefaces-Calendar-Sample ，然后单击“确定”。
Wait a while until the wizard recognized your pom.xml file that’s located there.等待一会儿，直到向导识别出位于此处的pom.xml文件。
Make sure you’re selected your pom.xml and click next and finish.确保选择了pom.xml ，然后单击“下一步”并完成。

It’s probably you may got set of errors that are talking about missing configurations or missing libraries like below.

您可能会遇到一些错误，这些错误都在谈论缺少的配置或缺少的库，如下所示。
Don’t pay attention for them cause you’ve created your project using Maven while the Eclipse is trying to read the project as Dynamic Web Project.不要关注它们，因为在Eclipse试图将项目读取为Dynamic Web Project时，您已经使用Maven创建了项目。
Select all of these errors and remove them and from Project menu choose Clean.选择所有这些错误并将其删除，然后从“项目”菜单中选择“ 清理”。
If your JDK was configured properly, you’re almost getting a clear result.如果您的JDK配置正确，您将获得清晰的结果。

Just deploy your WAR into any of Java EE compliant container and make fun through investigating the Calendar component.只需将WAR部署到任何符合Java EE的容器中，并通过研究Calendar组件来取乐。

摘要 (Summary)

Calendar component is a component provided by the Primefaces library. This tutorial tends to discuss it and all of its features. Download the project from below link and play around with it to learn more.

日历组件是Primefaces库提供的组件。本教程倾向于讨论它及其所有功能。从下面的链接下载该项目并进行试用以了解更多信息。

Download PrimeFaces Calendar Project下载PrimeFaces日历项目

翻译自: https://www.journaldev.com/3088/primefaces-calendar-component-example-tutorial

primefaces教程