我想用一个漂亮的日期选择器创建我的自定义日期过滤器 . 我添加了一个自定义日期组件，如下所述：https://www.ag-grid.com/javascript-grid-date-component
在这个组件中，我使用了ngx-bootstrap的BsDatepickerModule . datepicker正在显示和工作 .
问题是，在选择日期后不仅仅关闭了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;
}
}
1 回答
您可能需要使用“应用”按钮在弹出框中开发一个包含BS日期选择器的自定义组件 . 在我的一个项目中，我们有一个自定义的datepicker组件，用于ag-grid，它在一个带有一些自定义选项的popover（无应用按钮）上包含了ng-bootstrap日期选择器 . 然而，这是一项非常重要的工作，该组件需要一段时间才能投入 生产环境 .