正在agGrid中添加ngbDatepicker

Question

我正试图在agGrid中添加ngbdatepicker，但在添加日历时，日历进入了单元格。我试着将isPopUp添加为true，但这是对oitside的完整输入。

这是我写的代码：

{
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;
}
}

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

Answer 1

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

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

对于您的情况，简单的方法是将[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">