相关内容

返回首页

RichFaces 日历 - 月份选择

发布者    |      

在这篇文章中，我想分享一个简单但有用的技巧，这个技巧在 Richfaces 用户论坛上经常被问到。用例是允许从日历组件中仅选择月份和年份，并隐藏日期选择功能。

首先，我们将添加一个简单的内联日历到我们的表单中

<rich:calendar value="#{calendarBean.selectedDate}" popup="false"/>

然后，我们通过属性隐藏网格上方的天标签列表和页脚

<rich:calendar value="#{calendarBean.selectedDate}" 
popup="false" showWeekDaysBar="false" showFooter="false"/>

现在，我们想要隐藏日期网格。正如您可以在 FireBug 中轻松检查的那样——日历是一个包含一个用于标题的 <tr> 和六个用于网格本身的 <tr> 的表格。日期网格 <tr> 元素具有特殊 ID，而标题元素 <tr> 没有ID。所以我们需要给日历添加一个公共的 styleClass 并编写一个简单的选择器，该选择器将隐藏具有定义 ID 的 <tr> 元素

<style type="text/css">
	.special tr[id]{
		display:none; 
	}
</style> 

<rich:calendar value="#{calendarBean.selectedDate}" popup="false" 
showWeekDaysBar="false" showFooter="false" styleClass="special"/>

现在，最后一步。日历应将选定的日期传递给根据值绑定定义的 Bean。因此，我们需要在当前月份滚动时选择某个日期（例如，月初的第一天）。我们将使用 oncurrentdateselected 属性来完成此操作。每次滚动月份/年份时都会触发 currentdateselected 事件。因此，我们最终将得到以下代码

<rich:calendar showWeekDaysBar="false" showFooter="false" 
value="#{calendarBean.selectedDate}" 
oncurrentdateselected="event.rich.component.selectDate(event.rich.date)"
popup="false" styleClass="special"/>

现在，在用户滚动月份或年份后，所选月份的第一天将被选中，我们就可以在服务器端处理所选月份。它将传递给 calendarBean 的 selectedDate 属性。

在您的具体情况下，您可能需要添加一些样式（使用 rich 类非常简单）或重新定义标题本身（使用标题面和宏替换也非常简单）

注意

有人可能会指出，只需要使用currentDate就可以绑定所选月份。这是正确的，但仅适用于内联日历。在我的示例中，您确实可以去掉oncurrentdateselected，并直接使用currentDate的值绑定。但有人可能需要同样的功能，但用于弹出模式。在这种情况下，他们需要使用值而不是当前日期，因为结果应该显示在输入框中，并且由于日历在初始渲染时默认忽略currentDay，它会在所选日期的月份打开，如果未定义所选日期，则打开当前月份。因此，对于弹出模式，可以使用这种选定的日期技巧。

返回顶部