我使用ag-grid-react 19和ant设计组件。
我尝试使用ant design中的DatePicker为ag-grid列添加自定义日期过滤器。
但是当我单击下拉窗口时,过滤器失去焦点并关闭。
但是我希望下拉菜单在选择日期后保持打开状态。
图片:
import * as React from 'react';
import {
IFilter,
IFilterParams,
IDoesFilterPassParams
} from 'ag-grid-community';
import {DatePicker} from 'antd';
interface IState {
startDate: Date;
endDate: Date;
}
export class DateFilter extends React.Component<IFilterParams, IState>
implements IFilter {
state = {
startDate: null,
endDate: null
};
isFilterActive = () => {
return !!this.state.startDate || !!this.state.endDate;
};
setModel = (model: { startDate: Date, endDate: Date }) => {
if (!!model) {
this.state.startDate = model.startDate;
this.state.startDate = model.endDate;
} else {
this.state.startDate = null;
this.state.startDate = null;
}
};
getModel = () => {
return this.state;
};
render() {
return (
<div className="ag-filter-body-wrapper">
<div className="ag-filter-body" style={{padding: 4}}>
<DatePicker/>
</div>
</div>
);
}
doesFilterPass = (_: IDoesFilterPassParams): boolean => {
return false;
};
}