如何禁用内联 p:calendar (primefaces)答案

【问题标题】：How to disable inline p:calendar (primefaces)如何禁用内联 p:calendar (primefaces)
【发布时间】：2014-02-23 16:15:59
【问题描述】：

我注意到禁用内联 p:calendar 实际上会隐藏它。

我一直期望禁用的 p:calendar 只是显示日历但只读，就像所有其他典型的 JSF 组件一样。

如果我想要一个隐藏的 p:calendar，我会使用 render 属性。

有什么方法可以禁用内联 p:calendar 而不隐藏它？（只是为它屏蔽了鼠标和键盘）

Primefaces 4.

【问题讨论】：

标签： java jsf primefaces

【解决方案1】：

毕竟结果是一个跨度，所以你可以使用普通的jQuery来调整样式。

$('.disabledCalendar').children().fadeTo('slow', .7);
$('.disabledCalendar').append('<div style="position: absolute;top:0;left:0;width: 100%;height:100%;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>');
$(".ui-datepicker-inline td").unbind();

并将班级分配给日历：

<p:calendar styleClass="disabledCalendar" mode="inline" />

注意：这可能很棘手，如果有人在客户端使用样式并移除遮罩。他们将能够更改该值，因为此解决方案显然不会反映在服务器端。我会在服务器端验证值没有改变。

编辑： 您还可以将我的解决方案与 Kishor P 答案结合起来并取消绑定事件（我已经编辑了 jQuery 的代码）。这样会更安全。

可以在github 上找到一个小的工作示例。还有一个online Demo。

希望这会有所帮助。

【讨论】：

工作正常..Chokran :)

【解决方案2】：

我使用了readonly=true 属性，但它对我不起作用。

还有一个属性是readonlyInput=true，但这不是内联日历。

所以最后我最终通过 JQuery 解除绑定到 <TD> 的 p:calendar 组件的所有事件。

我不知道它是否是一个可行的解决方案（可能还有其他替代方案），但这个脚本工作得很好。

$(document).ready(
    function makeCalendarReadOnly(){
        $(".ui-datepicker-inline td").unbind();
    }
);

【讨论】：