OverlayPanel + 日历 + Primefaces答案

【问题标题】：OverlayPanel + Calendar + PrimefacesOverlayPanel + 日历 + Primefaces
【发布时间】：2012-10-24 19:06:05
【问题描述】：

我使用的是 primefaces 3.4，我在 p:overlaypanel 中有一个 p:calendar。当我选择覆盖面板关闭的日期时（使用 Google Chrome 时）当我在日历中单击“关闭”时使用 Firefox 时，覆盖面板也会关闭。

我能做些什么来解决这个问题？

我的代码是这样的：

<p:overlayPanel for="btnOP" hideEffect="fade">

    <p:panel id="panelTest">

      <p:calendar id="calendarOne"  pattern="dd/MM/yyyy HH:mm"
          value="#{bean.value}" showOn="button" validator="dateValidator">
      </p:calendar> 

    </p:panel>

</p:overlayPanel>

【问题讨论】：

位于表单之间。我意识到，当我单击超出覆盖面板的日历的任何部分时，会发生这种情况。原因是当我单击显示日历时，日历的一部分显示在覆盖面板上（到目前为止还可以，但是当我单击该部分中的日期时，覆盖面板会关闭）..

标签： primefaces calendar

【解决方案1】：

这可能现在必须解决，但无论如何，这是我面对同样问题时的方法。我的标记几乎是相同的（在overlayPanel 周围只有一个额外的<div>）并且通过一些挖掘我发现了这个：在overlayPanel 组件上，您取消绑定鼠标单击，因此它不会原生关闭：

onShow="$(document.body).unbind('mousedown.ui-overlay')"

（来源：Don't hide OverlayPanel on click）

然后，我编写了一些自定义 Javascript 来检查点击事件所针对的元素以及日历组件是否可见，如下所示：

$(document).click(
    function(e) {
        var target = e.target;

        if (!$(target).parents().is('div#overlay-panel') && !$('div#ui-datepicker-div').is(':visible')) {
            $('div.overlay-panel-classname').hide('fade', 100);
        }

    });

结果证明工作顺利（我自己也做了一些其他改进，但基本上就是这样）。

编辑：

在 hide 事件中，我添加了一个 toggleClass 语句，这样就不会影响触发按钮的行为：

$('div.verlay-panel-classname').hide('fade', 300, function() {
     $(this).toggleClass('ui-overlay-hidden ui-overlay-visible');
});

【讨论】：