在 agGrid 中添加 ngbDatepicker答案

【问题标题】：Adding ngbDatepicker in agGrid在 agGrid 中添加 ngbDatepicker
【发布时间】：2021-01-20 05:07:21
【问题描述】：

我正在尝试在 agGrid 中添加 ngbdatepicker，但在添加日历时，单元格内会出现。我尝试将 isPopUp 添加为 true，但这会使完整的输入变得不那么重要。

这是我写的代码：

 {
    headerName: 'Start Date',
    field: 'paiStartDate',
    width: 150,
    editable: (params) => { return this.isEditiable(params); },
    cellEditor: 'agDateInput',
  },


this.components = { agDateInput: DatePickerComponent };

这是我的组件 html：

<div class="row">
<div class="col-md-12 col-lg-12">
  <input data-input type="text" class="form-control"  autocomplete="off"
        [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker" (click)="d.toggle()" placement="bottom-right"   
        (dateSelect) = "onDateSelect($event)"
        size="13">
</div>

这里是ts代码：

    export class DatePickerComponent implements OnInit, AgEditorComponent   {

  params: ICellEditorParams; 
  public selectedDate: Date = new Date();
  model: NgbDateStruct;
  @ViewChild('d') datePicker : ElementRef;

  constructor() { }
  ngOnInit() { }

  getValue() {
    return `${this.selectedDate.getDate()}/${this.selectedDate.getMonth() + 1}/${this.selectedDate.getFullYear()}`;
  }
  isCancelBeforeStart?(): boolean {
    return false;
  }
  isCancelAfterEnd?(): boolean {
    return false;
  }

  agInit(params: any): void {
      this.params = params;
      this.selectedDate = params.value;
  }
  onDateSelect(date:Date){
    debugger;
    this.selectedDate = date;
    alert(this.selectedDate);
    this.params.api.stopEditing();
  }

  isPopup(): boolean {
    return false;
  }
}

请帮忙，因为这里的日历正在输入内部打开。

【问题讨论】：

标签： angular8 ag-grid ng-bootstrap

【解决方案1】：

这里的问题是在单元格内渲染的弹出元素。您需要将弹出元素附加到文档正文，使其按预期呈现。

有一篇博客文章解决了这个问题，它使用不同的日期选择器组件，但任何日期选择器组件的概念都保持不变：https://blog.ag-grid.com/using-third-party-datepickers-in-ag-grid/#appending-body

对于您的情况，简单的方法是将[container]="'body'" 添加到您的输入组件中。您可以在组件的文档中找到它：https://ng-bootstrap.github.io/#/components/datepicker/api#NgbDate

<input data-input type="text" class="form-control"  autocomplete="off"
        [(ngModel)]="model" [container]="'body'" ngbDatepicker #d="ngbDatepicker" (click)="d.toggle()" placement="bottom-right"   
        (dateSelect) = "onDateSelect($event)"
        size="13">

【讨论】：

感谢 Shuheb 成功了！！！此外，我们正在尝试使用类似 row['modified'] 的方式获取所有修改后的行，此单元格值不会出现在此对象中。