时间戳

首页 > 解决方案 > 在 agGrid 中添加 ngbDatepicker

angular8 - 在 agGrid 中添加 ngbDatepicker

问题描述

我正在尝试在 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;
  }
}

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

标签： angular8ag-gridng-bootstrap

解决方案

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

有一篇博客文章解决了这个问题，它使用了不同的日期选择器组件，但任何日期选择器组件的概念都是一样的：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">

推荐阅读