Question

我想用一个漂亮的日期选择器创建我的自定义日期过滤器。我添加了一个自定义日期组件，如下所述：https://www.ag-grid.com/javascript-grid-date-component

在这个组件中，我使用了ngx-bootstrap的BsDatepickerModule。 datepicker正在显示并正在运行。

问题是，在选择日期后不仅仅关闭了日期选择器，整个过滤器菜单也在关闭。我希望用户先按下应用过滤器。对于用户必须输入两个日期的日期范围，这尤其麻烦。

请参阅以下plunker进行演示： https://plnkr.co/edit/hM7uAZaadbjoGcXPRaDP

通过BsDatepickerModule datepicker选择日期后，如何防止过滤菜单关闭？

customDate.component.html

<div class="filter">
    <input type="text"
    #dp="bsDatepicker"
    bsDatepicker
    [bsValue]="date"
    [bsConfig]="{ dateInputFormat: 'DD.MM.YYYY' }">
</div>

customDate.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-customdatecomponent",
  templateUrl: "./customDate.component.html",
})
export class CustomDateComponent  {
  private date: Date;
  private params: any;

  agInit(params: any): void {
    this.params = params;
  }
  onResetDate() {
    this.setDate(null);
    this.params.onDateChanged();
  }
  onDateChanged(event) {
    this.params.onDateChanged();
  }
  getDate(): Date {
    return this.date;
  }
  setDate(date: Date): void {
    this.date = date;
  }
}

Answer 1

由于无法在SO上找到此问题的任何其他解决方案，因此我想提供此问题的解决方案。

发生的事情是，当您单击datepicker弹出窗口时，它会在ag-grid的弹出服务上下文之外创建元素。由于datepicker元素不在弹出服务的当前上下文中，因此单击datepicker意味着ag-grid认为您单击了过滤器之外，并且想要关闭过滤器弹出窗口。

要解决此问题，您想向日期选择器添加onShown的事件处理程序，以将该组件添加到ag-grid的弹出服务中。

customDate.component.html

<div class="filter">
    <input type="text"
           #dp="bsDatepicker"
           bsDatepicker
           [bsValue]="date"
           (onShown)="addDatepickerToAgGridContext($event)"
           [bsConfig]="{ dateInputFormat: 'DD.MM.YYYY' }">
</div>

然后，在事件处理程序中，您只需导航到params中可用的API中的popupService并将datepicker添加到活动元素列表中。在我们的例子中，日期选择器在标签bs-datepicker-container中实例化，因此您想使用JS选择该元素，然后将其添加到数组中。

addDatepickerToAgGridContext(e){
    this.params.api.gridCore.popupService.activePopupElements.push(document.getElementsByTagName("bs-datepicker-container")[0]);
}

Answer 2

对于 "ag-grid-community": "25.0.0"，您可以解决在“params”中添加 filterParams 的问题：

addDatepickerToAgGridContext(e) {
    this.params.filterParams.api.gridCore.popupService.popupList.push(
      { element: document.getElementsByTagName("bs-datepicker-container")[0] }
    );
  }

Answer 3

您可能需要开发一个自定义组件，该组件在带有“应用”按钮的弹出窗口中结合了BS日期选择器。在我的一个项目中，我们有一个自定义的datepicker组件，可用于ag-grid，该组件将ng-bootstrap日期选择器结合到一个带有一些自定义选项的弹出式窗口（无应用按钮）上。但是，这并不是一件容易的事，并且该组件花了一些时间才能投入生产。

Answer 4

对于"ag-grid-community": "25.3.0"

addDatepickerToAgGridContext(e){
    // @ts-ignore
    this.params.api.gridCompController.popupService.popupList.push(
       {element: document.getElementsByTagName("bs-datepicker-container")[0]}
    );
}

ag-grid自定义日期组件与ngx-boostrap

4 个答案: