quickest-silver
quickest-silver15mo 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
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.
rising-crimson
rising-crimson15mo ago
Hey @eleanor, sorry for the late response. Checking the issue now 🙏
graceful-blue
graceful-blue15mo ago
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
quickest-silver
quickest-silver15mo 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.