javascript - <p :calendar> highlight specific dates (values from bean)

Question

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

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

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

Answer 1

在 beforeShowDay JavaScript 函数中使用 EL 表达式将 bean 中的日期输出为数组。该函数应检查日期是否在您的数组中，是否在返回的数组中设置了正确的 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" />