2

我想在 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>

但该事件并没有被解雇。还有什么我遗漏的，或任何其他方法吗？

4

1 回答 1

5

你应该使用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 datepickerbeforeShowDay属性，请查看本教程Primefaces calendar – highlight dates

于 2012-11-15T09:04:44.250 回答