Date-Range Widget


I want to make a Date-range widget where user can select DateFrom and DateTo from a datepicker. I did not find any Alogolia default widget that 100% meets my case. Do you have any suggestions or me ?

The Algolia attribute we use for Date is DatePublished whose value is in Unix Timestamp. See attached.

Is there any way we can use rangeInput widget to select dates.

Thanks in advance :slight_smile:

Hi there!

If I understand your request correctly, you want to have a date-picker (like this one, for example) that allows selecting a date range.

As of now, we don’t have an InstantSearch widget that suits your needs indeed. However, you can create a custom widget that does exactly this.

To achieve this, you have to use the connectRange function to create a custom rangeInput widget. When you create this custom widget, you get access to the min and max value in the range. You can convert these values into dates so that the date-picker plugin you use can understand the values.

When your user selects a different time range, you need to convert the dates provided by the date-picker plugin back into the Unix timestamp value that represents this date. You can use these timestamps to call the refine function from within your connectRange function with the new date range that got selected.

I hope this helps to point you in the right direction. Please let me know if you have any questions!



1 Like