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

Question

我在我的 ag-grid 中使用单元格渲染来编辑日期field.Inside，如图所示添加了单元格 datePicker

view of my cell

但是当我单击日期图标时，日期选择器视图就像它完全堆积在单元格内并且无法正常显示。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 索引，还是不行..

谁能帮我解决这个问题？

提前致谢

Answer 1

两件事...

首先，如果您真的在单元格渲染器中使用日期选择器，请不要这样做。这应该在单元格编辑器中完成，而不是渲染器。

其次，如果你想要一个不受单元格约束的编辑器，您必须通过在编辑器中实现 isPopup() 并返回 true 来指定编辑器是 'popup' 编辑器。

相关文档位于 https://www.ag-grid.com/javascript-grid-cell-editing/#popup

Answer 2

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

所以对于angular，你需要使用ICellEditorAngularComp接口并注意

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

和

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

不要忘记在 isPopup(): boolean 方法中 return true - 为了正确的可见性。

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

（但你肯定可以使用任何东西）

还有一些事情需要注意：

使用

datepicker

您将为视图和数据库使用什么类型的值

它可以用 getValue 和 valueFormatter 方法处理

这就是理论，请查看下面的演示，随时询问任何相关问题，我们会尽力提供帮助。

DEMO

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

How to adjust datepicker view inside ag grid cell render template?

ag-grid

angular8