p-calendar 隐藏在 angular 7 中 bs-modal 的容器面板下

Question

我在 bootstrap 的 bs-modal 上使用了 primeNg 组件，我为多个笔记使用了滚动条。当点击 p-calendar 组件时，日历隐藏在滚动条后面。如图所示。

Answer 1

添加以下依赖项

HostListener from angular-core

import $ from 'jquery';

并将以下代码写入您的 ts 组件文件。

     @HostListener('document:click', ['$event'])
     openCloseCalendar(ev) {    
       if("P-CALENDAR" == ev.path[2].tagName || ev.path[3].tagName){
          let calElem = ev.path[2] || ev.path[3];
          let target = $(calElem).find(".ui-datepicker")[0];
          let calTop = $($(calElem).find("input")[0]).offset();
          if(calTop && calTop.top){
            $(target).css({"display":"block", "min-width": "200px", "position": "fixed", "top": calTop.top, left: ev.offsetY})
          }   
        }
      }

Answer 2

尝试在您的 p 日历中添加 [appendTo]: 'body'。

p-calendar 隐藏在 angular 7 中 bs-modal 的容器面板下

p-calendar hide under container panel on bs-modal in angular 7

bootstrap-modal

primeng

angular7