如何调整AG网格单元格渲染模板中的日期选择器视图？

本文介绍了如何调整AG网格单元格渲染模板中的日期选择器视图？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在ag-grid中使用单元格渲染来编辑日期字段。在该单元格中，如图所示添加了datePicker

I use cell rendering in my ag-grid for editing a date field.Inside that cell datePicker is added as shown

我的单元格视图

但是当我单击日期图标时日期选择器视图就像它完全堆在单元格中一样，并且无法正确显示。下图显示了我的问题

But when i am clicking the date icon date picker view is like it is fully mounded inside the cell and not visible properly.the below picture shows my issue

@Component({ selector: 'app-gender-renderer', template: ` ` <input type="text" id="recording_date_to" [(ngModel)]="changedRecDateTo" (change)="edit()" ngbDatepicker #d="ngbDatepicker" style="z-index: 0;" class="form-control input-sm" /> <button class="glyphicon glyphicon-calendar" (click)="d.toggle()" type="button"></button> })

尝试过z索引，它也无法正常工作。

Tried z index , it is also not working..

有人可以请se帮助我解决了这个问题？

Can anyone please help me to solve this ?

预先感谢您

推荐答案

如前所述，要在单元格中使用 DatePicker ，您需要创建 cellEditor 而不是 cellRenderer ，但是， cellEditor 就像 cellRenderer 的扩展。

As mentioned before, to be able to use DatePicker in cell you need to create cellEditor instead of cellRenderer, however, cellEditor just like an extension for cellRenderer.

因此，对于角度，您需要使用 ICellEditorAngularComp 接口并注意

So for angular, you need to use ICellEditorAngularComp interface and take care of

agInit(params: any): void // for init value which would be used in DatePicker

中使用的初始化值

和

and

getValue(): any // for passing value back to the grid (and update the cell)

别忘了返回 isPopup（）：boolean 方法中的true -用于正确的可见性。

don't forget to return true in isPopup(): boolean method - for correct visibility.

现在，关于DatePicker本身，我正在使用 @ danielmoncada / angular-datetime-picker

Now, about DatePicker itself, I'm using @danielmoncada/angular-datetime-picker

（但确保您可以使用任何东西）

还有一些需要注意的事情：

And there are a few things that you need to take care :

使用

您将使用哪种值类型的 datepicker 库是什么类型的值用于视图和数据库

what type of value is the datepicker library using

what type of value you will use for view and for database

，可以使用 getValue 和 valueFormatter 方法

这仅是理论上的内容，请查看下面的演示并随意提问，将尝试

That's all for theory, check my demo below and feel free to ask anything related, will try to help.

演示