Ant Design Table - Filtering by Date Range

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")