如何在 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 index ，它也不起作用..

Tried z index , it is also not working..

谁能帮我解决这个问题?

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.

所以对于angular，你需要使用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

和

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. 使用
的datepicker库是什么类型的值
2. 您将用于视图和数据库的值的类型

它可以用 getValue 和 valueFormatter 方法处理

and it could be handled with getValue and valueFormatter methods

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

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

演示

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