Question

我想在p：calendar的周末和假日申请css。我试图调用使用jQuery的beforeShowDay事件并根据条件设置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回调来自定义每个日期的外观。该函数返回一个   具有两个值的数组，第一个是用于指示日期是否将显示为已启用和第二个的标志   parameter是要添加到日期单元格的可选样式类。以下示例禁用周二和   星期五。（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 calendar – highlight dates

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

1 个答案: