harsh-harlequin•2y ago

[antd] using filterDropdown and RangePicker to filter date in a range of dates

Hi, I'm having some trouble filtering data using <DatePicker.RangePicker> and <Filterdorpdown> from antd. I have a requirement where i need to filter data in a range of dates, after i select a range of dates and click filter, it automatically sends out an XHR request which is great, but i want to customize the url param and i'm struggling to find a way to do so. currently the url looks like this: API_ENDPOINT?createdAt=${dateString}&createAt=${dateString} ; ultimately i want something like this: API_ENDPOINT?startDate=${unixTimestamp}&endDate=${unixTimestamp} I've tried to use the confirm props in filterDropdownProps and setFilters from useTable, but it doesn't seem to achive what i want. (or do i need to write my own dataProvider to achieve this?) Here is a code sandbox link for demonstration purpose: https://codesandbox.io/s/tender-sammet-2z6eje?file=/src/pages/posts/list.tsx Any suggestions would be helpful! Thanks a lot!

4 Replies

refine-support-bot•2y ago

Hi, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and found an answer! 🏆
Answer: You can use the confirm props in filterDropdownProps and setFilters from useTable to customize the url param. You can also write your own dataProvider to achieve this. SOURCES: ./docs/examples/inputs/datePicker.md ./docs/examples/table/antd/table-filter.md ./docs/api-reference/antd/components/filter-dropdown.md ./docs/tutorial/4-adding-crud-pages/antd/adding-sort-and-filters.md

Note: If this is the answer you need, then we are very lucky. If not, please wait for someone from the refine core team or the community to try to help you.

like-gold•2y ago

Hey @eleanor, sorry for the late response. Checking the issue now 🙏

harsh-harlequin•2y ago

Hey @eleanor please see the example here: https://codesandbox.io/s/pedantic-nova-9cdym3?file=/src/pages/posts/list.tsx

aliemir

CodeSandbox

pedantic-nova-9cdym3 - CodeSandbox

pedantic-nova-9cdym3 by aliemir using @pankod/refine-antd, @pankod/refine-cli, @pankod/refine-core, @pankod/refine-react-router-v6, @pankod/refine-simple-rest, @types/node, @types/react, @types/react-dom, cross-env

harsh-harlequinOP•2y ago

Hi @batuhanw Thanks for the reply. I've noticed that if you use setFilters in onCalendarChange , it fetches data every time the user select a date which is not ideal and cause errors if user leave one of a date empty. (when the value is null) I ended up tweaking the getList method in my dataProvider to generate the filters, which looks something like this:

// generateFilters.ts

if (field === 'reportedDate') {
    queryFilters['startDate'] = dayjs(value[0])
        .unix()
        .toString()
    queryFilters['endDate'] = dayjs(value[1]).unix().toString()
}

// generateFilters.ts

if (field === 'reportedDate') {
    queryFilters['startDate'] = dayjs(value[0])
        .unix()
        .toString()
    queryFilters['endDate'] = dayjs(value[1]).unix().toString()
}

I don't think it's an elegant way to solve this and also not sure if it's what generateFilters intends to do, but at least it leaves my component logic much clearer.