如何调整AG网格单元格渲染模板中的日期选择器视图？ [英] How to adjust datepicker view inside ag grid cell render template?

问题描述

我在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 :

1. 使用


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

1. what type of value is the datepicker library using
2. 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.

演示

这篇关于如何调整AG网格单元格渲染模板中的日期选择器视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！