React-instantsearch calendar input

Hey there!
I’d like to add a calendar input to my search form. The user can either select a single date or a date range.

I was wondering whether you would advise using the connectRange() connector and call

case 1: single date:

refine({min: dateValue, max: dateValue})

This assumes that the comparisons are non strict, but if they were we could simply subtract/add a small amount to the dates as a hack. Also assumes that algolia supports Ord( <, =, <=, etc) on Dates

case2: range date:

refine({min: minDateValue, max: maxDateValue})

Alternatively I could look at writing a custom connector, but the above working seems much faster

Thanks,
David

1 Like

Hi David, the best here is to actually give it a try, we never tried for now to connect a calendar to a React InstantSearch instance so give it a try and let us know how it goes!

We will really appreciate this feedback, so then we can see what we are missing API wise to achieve what you want.

Which calendar are you gonna plug?

1 Like

Hey I think I can get it to work by storing dates as seconds since 1st Jan 1970, as storing them as ISO string dates doesn’t support comparison.

I started plugging airbnb’s react-date in, but despite it’s popularity I’ve realized it’s actually pretty terrible in terms of flexibility (you can’t even change the size of it), and it falls short on mobile performance due to its extensive use of animations.

I’ve swapped to react-day-picker because of how it handles selecting either a range or a date, and supports no dates selected, unlike react-date-range.
Is there a connector which supports an array of [{min, max}] refinements? (So that I could select multiple date ranges for instance?)

Thanks, David

Hi @david, you can try to use the connectMultiRange connector: https://community.algolia.com/instantsearch.js/react/connectors/connectMultiRange.html

Let us know how it goes!

1 Like

Hey I took a look at connectMultiRange. I think the connectRange connector is better suited. I managed to get the calendar working but I have two issues:

a) Removing the refinement (which I can’t do from inside the connector, so I used the connectCurrentRefinements connector to add a reset option for just this refinement) doesn’t work as expected, as my component receives new props with some unexpected from, to value which is always the same (I’m guessing its some default Min Max computed from the index) - so I got around this with an _isReset flag, but its a bit messy. I have tried using the defaultRefinement flag to get around this issue, but this conflicts with b) below

b) I want to be able to retrieve hits which don’t have the date_starting always, and only filter out hits which have the property date_starting but aren’t within the given range. The default behaviour seems to exclude hits without this property when this refinement is applied.

I can share the code for the calendar filter in a public repo, but the code is pretty hacky and there are some outstanding issues / instabilities.

Thanks,

David