剑道列过滤器内的角度材料日期选择器问题

Posted

技术标签:

【中文标题】剑道列过滤器内的角度材料日期选择器问题【英文标题】:Angular Material Date picker issue inside kendo column filter 【发布时间】:2021-10-03 01:24:12 【问题描述】:

我有一个用于剑道网格列过滤器的模板,我使用材料日期选择器来选择日期。

剑道网格位于材质对话框内时发生的问题。

Issue

正如您在图像上看到的,mat datepicker 出现在过滤器后面。这是因为 mat-datepicker 对话框在 cdk-overlay 中被实例化,在包含网格的同一个 div 中,所以它们共享相同的 Z-index。

Inspector code

并且 kendo-grid 过滤器正在 app.component 内部实例化。

Inspector code 2

我认为我们有两种可能的解决方案:在 cdk-overlay div 中实例化过滤器的 kendo-popup 或将 mat-datePicker 移动到具有更高 z-index 的 kendo-popup 旁边。

如果我使用 kendo-datepicker,则不会发生此问题,因为它在 kendo-popup 旁边实例化,但我需要 mat-datepicker 来满足设计要求。

Inspector code 3

提前致谢,

V

【问题讨论】:

【参考方案1】:

telerik 论坛回答了我的问题。我必须将以下代码附加到网格的@Component。通过这个修改,当我在弹出窗口中使用我的网格时,剑道弹出窗口会在 cdk 叠加层中实例化。

providers: [
    
      // Provide the current component element as Popup container.
      provide: POPUP_CONTAINER,
      useExisting: ElementRef,
    ,
    // Create a new Popup Service that uses the provided container.
    PopupService,
  ],

【讨论】:

以上是关于剑道列过滤器内的角度材料日期选择器问题的主要内容,如果未能解决你的问题,请参考以下文章

角度材料日期选择器中的日期不正确

角度材料日期选择器 - 仅选择日期

角度材料日期选择器错误呈现

日历内的角垫日期选择器格式

角度材料日期时间选择器更改显示日期时间的格式

如何从角度材料日期选择器获取当前时间?