Ant Design Table - 按日期范围过滤

Question

I've trying to implement a date range filter in my Ant Design's table using this code here but no success so far. It looks like isn't working on newer versions of Ant Design.

Someone had successfully implemented it? How?

Answer 1

1. Find filterDropdown method in https://ant.design/components/table/#header

2. Replace <Input ... > with:

   <DatePicker.RangePicker style={{ marginBottom: 8, display: 'block' }} value={selectedKeys[0]} onChange={e => setSelectedKeys(e ? [e] : [])} onPressEnter={() => { confirm(); setSearchText(selectedKeys[0]), setSearchedColumn(dataIndex); }} />

3. Replace onFilter with:

   onFilter: (value, record) => record[dataIndex] ? moment(record[dataIndex]).isBetween(value[0], value[1], 'day', '[]') : "" ,

4. (optionally) replace render with:

   render: text => moment(text).format("DD/MM/YYYY")