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

Posted 2023-03-28

【中文标题】日期选择器隐藏在 ag-grid-angular 中，在 NgbModal 中加载

【英文标题】：Date picker is hidden in ag-grid-angular, which is loaded in 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> 

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

【参考方案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