Primefaces日历,周末和假日应用自定义样式

Question

我想在p:calendar的周末和假期申请css.我试图beforeShowDay使用jQuery 调用 事件并基于条件设置css.

<script>
    $(document).ready(function(){
       $(".hasDatepicker").datepicker("option", "beforeShowDay", function (date) {
          //If condition true
          return [true,'holidays'];
          //else
          return [true,''];
       });
    });     
</script>

<style>
    .holidays {background-color: wheat;}
</style>

<h:form prependId="false">
      <p:calendar/>
</h:form>

但事件并没有被解雇.还有什么我想念的,还是其他方法？

Answer 1

你应该使用beforeShowDay属性

beforeShowDay:在显示日期之前执行回调,用于自定义日期显示.

使用beforeShowDay javascript回调来自定义每个日期的外观.该函数返回一个带有两个值的数组,第一个是标志,指示日期是否显示为启用,第二个参数是要添加到日期单元格的可选样式类.以下示例禁用星期二和星期五.(PrimeFaces用户指南第50页)

<p:calendar value="#{dateBean.date}" beforeShowDay="tuesdaysAndFridaysDisabled" />


function tuesdaysAndFridaysDisabled(date) {
    var day = date.getDay();
    return [(day != 2 && day != 5), '']
}

jQuery解决方案

如果你想在不修改primefaces元素的情况下解决它,但是使用jquery datepicker beforeShowDay属性看一下这个教程Primefaces日历 - 突出显示日期