日期选择器隐藏在 ag-grid-angular 中，在 NgbModal 中加载答案

【问题标题】：Date picker is hidden in ag-grid-angular, which is loaded in NgbModal日期选择器隐藏在 ag-grid-angular 中，在 NgbModal 中加载
【发布时间】：2020-11-27 18:42:12
【问题描述】：

点击按钮会加载一个 NgbModal 模态框。该模态具有 ag-grid-angular 组件。

此网格有一个日期选择器列。我正在使用primeng日期选择器。日历显示的 HTML 代码。

   <p-calendar class="ui-datepicker" type="number" dateFormat="dd-mm-yy" monthNavigator="true" [maxDate]=today [style]="{'position': 'fixed', 'overflow': 'visible', 'z-index': '999', width:'200px'}"
        yearRange="1930:2030" yearNavigator="true" showButtonBar="true" [(ngModel)]="dateValue" (onSelect)="onSelectDate()">
    </p-calendar>

这里的问题是日期选择器日历总是隐藏在网格内。像这样。我该如何解决这个问题。

【问题讨论】：

标签： css bootstrap-modal ag-grid ag-grid-angular primeng-calendar

【解决方案1】：

这可以通过查看 CSS 类 .ag-root-wrapper 的 CSS 属性 overflow 来解决。

这个类是在<ag-grid-angular> 指令中声明的（见截图）。

我的解决方案是在包含<ag-grid-angular> 指令的组件的css 中包含overflow 属性的覆盖。（我在 html 中包含 ag-grid 的组件）。

// Put this on the component that includes ag-grid
::ng-deep .ag-root-wrapper {
  overflow: visible;
}

以下Stack Overflow Post 帮助我确定了解决方案。

【讨论】：

为我工作谢谢！！！

【解决方案2】：

像这样添加 appendTo="body"：

<p-calendar appendTo="body" class="ui-datepicker" type="number" dateFormat="dd-mm-yy" monthNavigator="true" [maxDate]=today [style]="{'position': 'fixed', 'overflow': 'visible', 'z-index': '999', width:'200px'}"
        yearRange="1930:2030" yearNavigator="true" showButtonBar="true" [(ngModel)]="dateValue" (onSelect)="onSelectDate()">
    </p-calendar>

【讨论】：

【解决方案3】：

这里的问题是日历弹出窗口被容器剪裁了。这是使用日期选择器时的常见问题。

要解决这个问题，您需要将弹出元素设置为文档正文，最简单的解决方案是将[appendTo]="'body'" 添加到您的日历组件中，这是primeng-calendar 的API 中存在的属性。

有关实现的更多详细信息，请参阅此博客，因为它有一个使用 primeng 和 ag-grid 的示例：https://blog.ag-grid.com/using-third-party-datepickers-in-ag-grid/#appending-body

【讨论】：