< p：calendar>突出显示特定日期（来自bean的值） [英] <p:calendar> highlight specific dates (values from bean)

问题描述

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

使用< h：inputHidden value =＃{bean.theDates}/> 会生成一个包含逗号分隔的日期字符串的String值。

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

beforeShowDay JavaScript函数中的数组输出您的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  if（date === new Date（dates [i]））{
 cssclass ='mycss' ; 
} 
} 
 return [true，cssclass]; 
} 
< / script> 
  

PrimeFaces日历：

 < p：calendar beforeShowDate =highlightDays/> 
  

Using the primefaces <p:calendar> component, I need to highlight certain dates. I am aware of its beforeShowDate attribute, but the dates to be highlighted need to be fetched from the backing bean.

Using a <h:inputHidden value="#{bean.theDates}" /> results in a single String value containing comma separated Date Strings.

How can I set a styleClass for a given list of dates (in my bean)?

解决方案

Use an EL expression to output the dates from your bean as an array in your beforeShowDay JavaScript function. The function should check if the date is in your array, if it is set the correct CSS class in the returned array.

The output of #{bean.theDates} could be ['2014-01-01','2014-02-01'], and your JavaScript function would look something like this:

JavaScript in head of page:

<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 Calendar:

<p:calendar beforeShowDate="highlightDays" />

这篇关于< p：calendar>突出显示特定日期（来自bean的值）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！