primefaces - OverlayPanel + 日历 + Primefaces

Question

我使用的是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>

Answer 1

这可能现在必须解决，但无论如何，这是我面临同样问题时的方法。我的标记几乎是相同的(只有一个额外的<div>围绕overlayPanel)，经过一番挖掘我发现了这一点:在overlayPanel组件上，您取消绑定(bind)鼠标单击，因此它不会 native 关闭:

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);
        }

    });

结果工作顺利(我自己做了一些其他改进，但基本上就是这样)。

编辑:

在隐藏事件中，我添加了一个toggleClass 语句，这样就不会干扰触发按钮的行为:

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