[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
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
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.
genetic-orange•2y ago
Hey @eleanor, sorry for the late response. Checking the issue now 🙏
adverse-sapphire•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
extended-salmon•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:
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.