1

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

4

1 回答 1

2

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

  1. 禁用（灰显）除您要突出显示的日期之外的所有日期。这禁止用户选择未启用的日期。您需要实现一个 javascript 函数，该函数接受“day”参数并返回true或者false是否应该启用日期。然后在（例如）的isDayEnabled属性中指定函数。<rich:calendar/><rich:calendar isDayEnabled="dayEnabledFunction" />

  2. 将不同的类应用于您想要的日期：这允许用户选择任何日期，但仍会突出显示您想要的日期。创建一个 CSS 类并将该类仅应用于您想要的日期。同样，实现一个 javascript 函数，该函数接受一个“day”参数并返回一个字符串，其中包含您要应用的类的名称。为您不想突出显示的日期返回一个空字符串，并为您想要突出显示的日期返回新的 css 类名称。然后在（例如）的dayStyleClass属性中指定函数。<rich:calendar/><rich:calendar dayStyleClass="dayStyleFunction" />

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

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

MyComponent代码：

@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();
    }
}

下面是 javascript 函数如何工作的示例dayStyleClass="dayFunc"。这假设您有 jQuery（richfaces 需要它）并使用了该noconflict()函数。我们使用jQuery.inArray函数，它返回数组中值的索引，如果值不在数组中，则返回 -1：

function dayFunc(day) { 
    return jQuery.inArray(day, highlightDates) >= 0 ? 'highlighted' : 'normal'; 
}
于 2012-10-05T11:08:40.750 回答