<p: 日历>突出显示特定日期(bean中的值）

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

本文关键字：日期 bean 显示 lt 日历 gt      更新时间：2023-09-26

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

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

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

使用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" />
相关文章：