Question

我正在使用带有接缝的Richfaces 3.3。我有一个<rich:calendar>组件，我需要在其中突出显示多个日期。我需要在运行时动态设置日期。 <rich:calendar>组件可以实现吗？谢谢。

Answer 1

您无法选择多个日期（<rich:calendar/>作为日期字段的输入），但您可以使用与其他日期不同的方式为某些日期着色。这些是你的选择：

禁用（灰显）除要突出显示的日期之外的所有日期。这禁止用户选择未启用的日期。您需要实现一个带有“day”参数的javascript函数，如果应该启用日期，则返回true或false。然后在isDayEnabled的{{1}}属性中指定该函数（例如<rich:calendar/>）。
将不同的类应用于您想要的日期：这允许用户选择任何日期，但仍然会突出显示您想要的日期。创建一个css类，并将该类仅应用于所需的日期。再次，实现一个带有“day”参数的javascript函数，并返回一个字符串，其中包含您要应用的类的名称。为您不想突出显示的日期返回一个空字符串，并为要突出显示的日期返回新的css类名称。然后在<rich:calendar isDayEnabled="dayEnabledFunction" />的{{1}}属性中指定该函数（例如dayStyleClass）。

要将日期传递给javascript函数，服务器端应生成适当的JavaScript代码，例如：

<rich:calendar/>

<rich:calendar dayStyleClass="dayStyleFunction" />代码：

<script type="text/javascript">
    highlightDates = new Array();
    #{myComponent.dateList}
</script>

javascript函数MyComponent如何工作的示例如下。这假设你有jQuery（richfaces需要它）并使用@Named("myComponent") public class MyComponent implements Serializable { // The list of dates to highlight, taken from somewhere private List<Date> dates; public String getDateList() { StringBuilder sb = new StringBuilder(); // Iterate the list of dates and add a javascript push // for each date and return the resulting string. for (Date d : dates) { sb.append("highlightDates.push(new Date("); sb.append(d.getTime()); sb.append(");\n"); } return sb.toString(); } }函数。我们使用jQuery.inArray函数，它返回数组中值的索引，如果值不在数组中，则使用-1：

dayStyleClass="dayFunc"

丰富的日历 - 突出显示所选日期

1 个答案: