Question

使用primefaces <p:calendar>组件，我需要突出显示某些日期。我知道它的beforeShowDate属性，但需要突出显示的日期需要从辅助bean中提取。

使用<h:inputHidden value="#{bean.theDates}" />会产生包含逗号分隔日期字符串的单个字符串值。

如何为给定的日期列表（在我的bean中）设置styleClass？

Answer 1

使用EL表达式将您的bean中的日期作为数组输出到beforeShowDay JavaScript函数中。该函数应检查日期是否在数组中，如果在返回的数组中设置了正确的CSS类。

#{bean.theDates}的输出可能是['2014-01-01','2014-02-01']，您的JavaScript函数看起来像这样：

页面顶部的JavaScript：

<script>
    function highlightDays(date) {
        var dates = #{bean.theDates};
        var cssclass = '';
        for (var i = 0; i < dates.length; i++) {
            if (date === new Date(dates[i])) {
               cssclass = 'mycss';
            }
        }
        return [true, cssclass];
    }
</script>

PrimeFaces日历：

<p:calendar beforeShowDate="highlightDays" />

<p：calendar>突出显示特定日期（来自bean的值）</p：calendar>

1 个答案: