PrimeFaces日历关闭覆盖层

Question

我有一个叠加板，此面板有一个日历。

 <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>

因此，当用户选择一天时，覆盖层关闭。那是我的问题。我需要使用diverable =" true"，因为我需要错过关闭。

是否有解决方案此日历 - 覆盖层错误？

我尝试用JS处理此操作，但失败了。

谢谢！

Answer 1

最佳选择是在PrimeFaces上打开问题，因此它们解决了问题。

解决您的特定问题的另一种方法是覆盖实现可取消逻辑的Overlaypanel原型的BindCommonevents功能。在那里，您可以检查是否在datepicker上点击并防止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();
      }
    });
  }
})();

这是带有其他"新部分"的原始功能的副本(请参阅功能中的注释(。

将脚本集成在您的 facelet 中：

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

在更新较新的PrimeFaces版本时，请谨慎对待类似的内容。您始终必须检查一切是否仍然可以正常工作。