#community-help

Implementing Dropdown Menu for Filtering Date Ranges with Typesense and React Hooks

TLDR Christoph wanted to implement a dropdown menu to filter search results by a date range using Typesense and React InstantSearch Hooks. Jason suggested creating a custom widget and adapting the DateRangePicker widget for relative dates.

9mo

Join the chat

Mar 04, 2023 (9 months ago)

Photo of md5-bd948701c5ae8c6354bc5f71dadde42c

Christoph

05:17 PM

I want to implement a dropdown menu to filter searches for a certain date range. E.g., last day, last month etc. I am using typesense adapter and React InstantSearch Hooks. How do I accomplish this? I have managed to sort my results but I'm stuck at filtering them for those criteria

Photo of md5-1b62114a658b760944aa7d2b4c274460

Dima

05:30 PM

Do you need facet counts for each option?

Christoph

06:46 PM

I don't think, so I basically only want a dropdown with those 4 options to choose from. A user can select one and the search gets filtered for the selected criteria. Dima

Photo of md5-8813087cccc512313602b6d9f9ece19f

Jason

06:55 PM

You’d need to add a field to every document with the exact value that you want to show users to filter on

06:56

Jason

06:56 PM

For eg, if you have a timestamp field that stores the date in Unix timestamp and you want to show the user “2022-2023”, you’d need to have a new field with that exact value “2022-2023" that you compute at indexing time, and then in the refinementList mention that field as the attribute

Christoph

06:57 PM

So its not possible to dynamically filter based on the timestamp and the current time?

Jason

06:59 PM

Not with the standard instantsearch widgets

06:59

Jason

06:59 PM

You’d have to build a custom widget

Christoph

06:59 PM

Yeah thats what im actually trying to do. I'm using React InstantSearch Hooks currently

Jason

07:02 PM

May be you could adapt this widget to do relative dates: https://github.com/algolia/react-instantsearch-widget-date-range-picker

Typesense

Lightning-fast, open source search engine for everyone | Knowledge Base powered by Struct.AI

Indexed 3011 threads (79% resolved)

Join Our Community

Similar Threads

Combining ReactInstant Search Widgets with React Hook Form Version

Uma asks if they can combine ReactInstant Search widgets with React Hook Form version widgets. Jason suggests asking in the Instantsearch github repo, but suspects they'd need to switch all widgets to the hooks version.

6mo

Query on Menu RefinementList and Usage of Typesense with React-InstantSearch-Hooks

Dipankar wanted to refine menus using `react-instantsearch-dom` and inquired on Typesense's compatibility with `react-instantsearch-hooks`. Jason recommended using `connectCurrentRefinements` and confirmed Typesense's compatibility.

19mo

Customizing UI for Typesense Filters with Instantsearch Adapter

KARTHICK asked about custom UI for typesense filters. Jason suggested creating custom Instantsearch widgets and using typesense-js for direct calls if building own UI widgets.

7mo

Issue with Typesense Instantsearch and Upgrading to React 18

Carl experienced problems updating packages for a project. VIVEK suggested disabling reactStrictMode, while Jason insisted on downgrading to React 17 due to compatibility issues. Carl eventually found a workaround.

17mo

Issues with Typesense Frontend Search Integration

Akash experienced issues integrating Typesense into their frontend search, particularly with their search box. Jason guided them to troubleshoot, eventually identifying the issue to be with react-instantsearch-dom and suggesting a downgrade to react 17, which resolved the issue.

14mo