Question

我有一个overlayPanel，这个面板有一个日历。

 <p:overlayPanel hideEffect="fade" showCloseIcon="true" dismissable="true" >
        <h:form>
            <p:panelGrid columns="1" styleClass="dateRangeFilterClass">
                <p:calendar value="#{cc.attrs.value.from}" showOn="button" pattern="#{dateFormat.onlyDateFormat}"
                            mask="true"  >
                    <p:ajax event="dateSelect" global="false"/>
                </p:calendar>
 </p:panelGrid>
        </h:form>
    </p:overlayPanel>

因此，当用户选择一天时，overlaypanel关闭。多数民众赞成我的问题我需要使用dismissable =“true”因为我需要错过关闭。

这个日历有任何解决方案 - overlaypanel bug吗？

我尝试用JS处理这个问题，但失败了。

谢谢！

Answer 1

最佳选择是打开issue at PrimeFaces，以解决问题。

解决特定问题的另一种方法是覆盖实现可解释逻辑的OverlayPanel原型的bindCommonEvents function。在那里你可以检查点击是否在一个日期选择器上并阻止overlayPanel关闭。此解决方案看起来像这样（使用PrimeFaces 6.1测试）

创建文件 overlayPanelFix.js ：

(function() {
  PrimeFaces.widget.OverlayPanel.prototype.bindCommonEvents = function(dir) {
    var $this = this;

    if (this.cfg.showCloseIcon) {
      this.closerIcon.on('mouseover.ui-overlaypanel', function() {
        $(this).addClass('ui-state-hover');
      }).on('mouseout.ui-overlaypanel', function() {
        $(this).removeClass('ui-state-hover');
      }).on('click.ui-overlaypanel', function(e) {
        $this.hide();
        e.preventDefault();
      }).on('focus.ui-overlaypanel', function() {
        $(this).addClass('ui-state-focus');
      }).on('blur.ui-overlaypanel', function() {
        $(this).removeClass('ui-state-focus');
      });
    }

    // hide overlay when mousedown is at outside of overlay
    if (this.cfg.dismissable && !this.cfg.modal) {
      var hideNS = 'mousedown.' + this.id;
      $(document.body).off(hideNS).on(
          hideNS,
          function(e) {
            if ($this.jq.hasClass('ui-overlay-hidden')) {
              return;
            }

            // do nothing on target mousedown
            if ($this.target) {
              var target = $(e.target);
              if ($this.target.is(target) || $this.target.has(target).length > 0) {
                return;
              }
            }

            // NEW PART: do nothing on datepicker mousedown
            var target = $(e.target);
            if(target.hasClass('ui-datepicker') || target.parents('.ui-datepicker').length) {
              return;
            }
            // NEW PART END

            // hide overlay if mousedown is on outside
            var offset = $this.jq.offset();
            if (e.pageX < offset.left || e.pageX > offset.left + $this.jq.outerWidth() || e.pageY < offset.top
                || e.pageY > offset.top + $this.jq.outerHeight()) {

              $this.hide();
            }
          });
    }

    // Hide overlay on resize
    var resizeNS = 'resize.' + this.id;
    $(window).off(resizeNS).on(resizeNS, function() {
      if ($this.jq.hasClass('ui-overlay-visible')) {
        $this.align();
      }
    });
  }
})();

它是原始功能的副本，附加了＆＃34; NEW PART＆＃34; （见功能评论）。

将脚本集成到 facelet ：

中

<h:outputScript name="js/overlayPanelFix.js" />

在更新到较新的PrimeFaces版本时，请小心覆盖类似的内容。你总是要检查一切是否仍然正常。

primefaces日历关闭overlayPanel

1 个答案: