InstantSearch + Filter by Date

Hi all,

I’ve been dabbling with InstantSearch for a little while. I have a new index that relies on InstantSearch, but uses a unix ‘date_timestamp’. Here is a truncated subset of my JSON schema.

{
“course_name”: “Any course name”,
“brand”: “AMCE”,
“publisher”: “ACME”,
“date”: “11/19/2019”,
“date_timestamp”: 1574121600,
“duration”: 1
}

I’m using the InstantSearch demo code as a starting point mostly because I’m a newbie, but also because it’s awesome [1].

I want to add logic to the InstantSearch code that will apply the Filter by date code from the Algolia docs [2]. Can someone give me pointer where in the InstantSearch code one might apply the ‘Filter by date’ logic?

The desired behavior is that my Search index will include, but not show, indexed courses that are in the past based on the unix date (“date_timestamp”). Hope that was not too cryptic. Appreciate any assistance.

[1] https://github.com/algolia/instant-search-demo/blob/master/search.js
[2] https://www.algolia.com/doc/guides/managing-results/refine-results/filtering/how-to/filter-by-date/?language=javascript#applying-a-date-filter

There’s no built-in date filter widget.
Most of the time, people use those timestamps to provide a new sort order, like “Most recent first”.

How to use it will really depend on your use case.
You might be happy using a rangeSlider:

But if you’re looking for more customization, you can always build your own widget:

Hi Jerska - many thanks for the response. Essentially, I don’t want to show any entry that has a unix date_timestamp in the past. Does that make sense? So I don’t think the slider is the right approach because we’d be showing past events by default with a slider.

Do you think creating a new widget is the correct approach given the above additional explanation?

Hi @jamie,

Yes, that makes perfect sense!

You took the correct approach in storing your dates in a unix timestamp format, because you can now use numeric filters to filter out the values you do not need.

So that your search queries do not return any entry that has a unix date_timestamp in the past, you can just apply a filter in your search at query time by doing something like:

const today = Date.now()

index.search({
  query: 'query',
  filters: `date_timestamp > ${today)}`
});

Does this work for you?

Hi Marie,

Thanks for the starter code. Can you share if the structure of index.search code has changed substantially since the Instant Search Demo code from Github was shared? [1].

I have been relying on this code because it has a working user interface. I’ve been able to tweak this code to working with my index, but I’m having difficulty incorporating your code above. I wonder if it’s how the ‘function app(opts)’ was constructed in the code on Github.

In other words, does the Github code need to be updated?

[1] https://github.com/algolia/instant-search-demo/blob/master/search.js

Hello @jamie,

Sadly the instant-search-demo is a bit outdated as it is using InstantSearch v2 (we’re currently at v4). You’ll find more up-to-date demos here: https://www.algolia.com/doc/guides/building-search-ui/resources/demos/js/

But you can still achieve what you want with InstantSearch v2, for this you’ll have to pass filters to searchParameters during instantsearch initialization:

const today = Date.now();

const search = instantsearch({
  appId: 'latency',
  apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
  indexName: 'instant_search',
  searchParameters: {
    filters: `date_timestamp > ${today}`
  }
})

Documentation: https://community.algolia.com/instantsearch.js/v2/instantsearch.html#struct-InstantSearchOptions-searchParameters

If you are using InstantSearch v4, you can use the configure widget to accomplish the same thing:

const search = instantsearch({
  indexName: 'instant_search',
  searchClient: algoliasearch(
    'latency',
    '6be0576ff61c053d5f9a3225e2a90f76'
  )
});

const today = Date.now();

search.addWidgets([
  instantsearch.widgets.configure({
    filters: `date_timestamp > ${today}`
  }),
]);

Demo: https://codesandbox.io/s/instantsearchjs-app-piy4d (here we filter on popularity but it is the same principle)
Documentation: https://www.algolia.com/doc/api-reference/widgets/configure/js/

Thanks so much for this. I’ll continue to play around with version2 before experimenting with version four. Quick question. Is the search_parameter missing an opening parenthesis on the today element?

searchParameters: {
filters: date_timestamp > ${today)}

Oh. The closing parenthesis is actually a small typo. I fixed the examples :sweat_smile:

Thanks again Yannick for helping me get closer. Your post is very helpful. I’m getting unexpected results with the following code. I’m still using the v.2 code base. The index only returns values when I use the ‘less than’ < operator. When I use the ‘greater than’ > operator, the index returns null. This is undesired and unexpected, as I have a January event in my index with a unix time stamp “1579762800”. Do you have any other suggestions?

function app(opts) {
  const today = Date.now();
  const search = instantsearch({
    appId: opts.appId,
    apiKey: opts.apiKey,
    indexName: opts.indexName,
    urlSync: true,
    searchParameters: {
    filters: `date_timestamp <= ${today}`
    }
  });

Hi Jamie,

The best way to debug this is to look at the logs tab in your Algolia dashboard or inspect the http request in your browser’s “network” tab (in the dev tools).

Here it seems like your storing timestamp in seconds, but using milliseconds when querying. Make sure you’re using consistent timestamp. Personally, I’d use seconds but I think in JS you’ll have to do Date.new() / 1000

Please let me know if that worked.

Hi Julien,

That did the trick! I just updated my code to include the following. Everything else worked after that. Thanks to you and the rest of the team.

const today = new Date().getTime() / 1000

1 Like