Custom Date range component

[pixelastic]

Do you want to request a feature or report a bug?
Feature

Feature: What is your use case for such a feature?
I have records representing events, each with a startDate and endDate (as Unix timestamps). I'd like to be able to filter them through a range (ie. "All events between October 1st and November 13th").

I don't see any of the default components that could help me achieve that. Before jumping into building my own, I wanted to discuss it and see if it was something you already pondered.

Feature: What is your proposed API entry? The new option to add? What is the behavior?
I guess I could somehow hack the price range component to make it work with timestamps, but this will result in a poor UI for this specific use-case. I think a great UI would require custom datepickers. Datepickers are hard and we don't want to incorporate them into our library.

On the other hand, creating a component that would work with any Datepicker out there seems like a very bad idea and would lead to configuration hell. Maybe just adding an example or an FAQ entry on how to do that would be enough?

[Haroenv]

We're struggling with this use case in the other versions too. did you try implementing it already? It starts to get really confusing with recurring events and events that have more than one date.

[pixelastic]

I started working on the component, but only on the UI part so far (using vue-flatpickr). Haven't worked on integrating with Algolia yet.

My events only have a start and end date, no recurring, only one date.

[peteleco]

Just subscribe this feature, i will be implementing something like this in next week.

[Haroenv]

Please do a PR or pen with your solution, it’ll be very useful

[SamJWeissman]

Hopefully this isn't a stupid question!

Until this is available, are there any examples of how one might do this with what's available? Would it be similar to the RangeInput, IE:

this.searchStore.addNumericRefinement('date', '>=', startDate);
this.searchStore.addNumericRefinement('date', '<'=, endDate);`

Would I need to use addFacet on the date attribute or just make it searchable?

(where startDate and endDate are Unix timestamps)

Thank you in advance!

[Haroenv]

Yes, you'll need to do addFacet and removeFacet on unmount @SamJWeissman, if you have an example in codesandbox, I'll gladly take a look on how to fix it. Note that in your code sample you wrote the = outside of your string.

[SamJWeissman]

@Haroenv

Thanks for the advice! For now we're going to just Facet down on the "month" of our data -- fits our use case better and allows us to leverage everything Vue InstantSearch comes with out of the box.

[Haroenv]

Good to know! In the future we will consider dates as a widget to build, but there’s more frequently requested things for now. Please upvote the issue if this is relevant to your interests.

[Haroenv]

For v2: here's a component which mostly solves the issue, but still some upstream mistakes I think. I'm going to stop working on this for now, but will continue working on it on a later time if the need shows: https://codesandbox.io/s/4qkqvxo334

[JackEdwardLyons]

Any news on if this feature will be revived for a future release?

[ColeDCrawford]

Yeah would be pretty useful.