Table Filter with DatePicker using antd - reactjs

Question

Following is the code for Ant design table with filtering the object using the DatePicker but not able to filter Out and Reset and Filter button also not Working Can anyone help me to solve this problem.
CodeSandbox editor Link : https://codesandbox.io/s/customized-filter-panel-antd-4-18-4-forked-lzuru?file=/index.js
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, DatePicker, Button, Space } from "antd";
import Highlighter from "react-highlight-words";
import { SearchOutlined } from "#ant-design/icons";
const data = [
{
key: "1",
name: "John Brown",
date: "2022-01-27T00:00:00Z",
address: "New York No. 1 Lake Park"
},
{
key: "2",
name: "Joe Black",
date: "2022-01-27T00:00:00Z",
address: "London No. 1 Lake Park"
},
{
key: "3",
name: "Jim Green",
date: "2022-01-25T00:00:00Z",
address: "Sidney No. 1 Lake Park"
},
{
key: "4",
name: "Jim Red",
age: "2022-01-22T00:00:00Z",
address: "London No. 2 Lake Park"
}
];
class App extends React.Component {
state = {
searchText: "",
searchedColumn: ""
};
getColumnSearchProps = (dataIndex) => ({
filterDropdown: ({
setSelectedKeys,
selectedKeys,
confirm,
clearFilters
}) => (
<div style={{ padding: 8 }}>
<Space>
<DatePicker
// format={"DD-MM-YY"}
onChange={(e) => {
setSelectedKeys([e.format("YYYY-MM-DDT00:00:00Z")]);
}}
allowClear={false}
/>
</Space>
<Space>
<Button
type="primary"
onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
icon={<SearchOutlined />}
size="small"
style={{ width: 90 }}
>
Search
</Button>
{/* <Button
onClick={() => this.handleReset(clearFilters)}
size="small"
style={{ width: 90 }}
>
Reset
</Button> */}
<Button
type="link"
size="small"
onClick={() => {
confirm({ closeDropdown: false });
this.setState({
searchText: selectedKeys[0],
searchedColumn: dataIndex
});
}}
>
Filter
</Button>
</Space>
</div>
),
filterIcon: (filtered) => (
<SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
),
onFilter: (value, record) =>{
return(
record[dataIndex]
? record[dataIndex]
.toString()
.toLowerCase()
.includes(value.toLowerCase())
: ""
)
},
onFilterDropdownVisibleChange: (visible) => {
if (visible) {
// setTimeout(() => this.searchInput.select(), 100);
}
},
render: (text) =>
this.state.searchedColumn === dataIndex ? (
<Highlighter
highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
searchWords={[this.state.searchText]}
autoEscape
textToHighlight={text ? text.toString() : ""}
/>
) : (
text
)
});
handleSearch = (selectedKeys, confirm, dataIndex) => {
console.log(selectedKeys, confirm, dataIndex);
confirm();
this.setState({
searchText: selectedKeys[0],
searchedColumn: dataIndex
});
};
handleReset = (clearFilters) => {
clearFilters();
// console.log(this.state.searchText);
this.setState({ searchText: "" });
};
render() {
console.log(this.state.searchText);
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
width: "30%"
},
{
title: "Date",
dataIndex: "date",
key: "date",
width: "20%",
...this.getColumnSearchProps("date")
}
];
return <Table columns={columns} dataSource={data} />;
}
}

Answer 1

You can use moment to compare the dates and filter
getColumnSearchProps = (dataIndex) => ({
filterDropdown: ({
setSelectedKeys,
selectedKeys,
confirm,
clearFilters
}) => (
<div style={{ padding: 8 }}>
<Space>
<DatePicker
// format={"DD-MM-YY"}
onChange={(e) => {
setSelectedKeys([e]);
}}
allowClear={true}
/>
</Space>
<Space>
<Button
type="primary"
onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
icon={<SearchOutlined />}
size="small"
style={{ width: 90 }}
>
Search
</Button>
<Button
onClick={() => this.handleReset(clearFilters)}
size="small"
style={{ width: 90 }}
>
Reset
</Button>
<Button
type="link"
size="small"
onClick={() => {
confirm({ closeDropdown: false });
this.setState({
searchText: selectedKeys[0],
searchedColumn: dataIndex
});
}}
>
Filter
</Button>
</Space>
</div>
),
filterIcon: (filtered) => (
<SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
),
onFilter: (value, record) => {
return (
moment(record[dataIndex]).format("DD-MM-YYYY") ===
value.format("DD-MM-YYYY")
);
},

Answer 2

First of all it is a bad idea to compare your dates as strings. or your use case where you only want to compare dates without time, you can compare dates using isSame().
To reset the filter state, you can use a controlled state to clear your filters as shown in the antd clear filter example