Filter search by date in search-ui

Elastic Search
1

My documents have a date field with name published_timestamp. I would like to provide user possibility to filter search results on specific date (excluding time), for example 2020-12-17.

My thought was to add an date input field where user can pick a date and then this date will be sent in searches as filter. But Im not sure if this is supported in search-ui?

I have tried to use Facet for this field, the problem is that It includes the complete timestamp.

I guess what I'm asking is how to add range filter in search-ui?

2

Hi @ismarslomic!

If you check out the Code Sandbox that is linked in Search UI's README page, it has an example of a range filter on the date_established field. As of the time of this post, it's lines 90-108. I'm going to copy-paste the portion of that code below.

  date_established: {
    type: "range",

    ranges: [
      {
        from: moment().subtract(50, "years").toISOString(),
        name: "Within the last 50 years"
      },
      {
        from: moment().subtract(100, "years").toISOString(),
        to: moment().subtract(50, "years").toISOString(),
        name: "50 - 100 years ago"
      },
      {
        to: moment().subtract(100, "years").toISOString(),
        name: "More than 100 years ago"
      }
    ]
  },

You could also have a date input field and have something watching for a change in value and then fire a similar query went the value changes.

Hope this helps!
Brian

3

Thanks, @Brian_McGue. But the example you are referring to is producing a request with facets field, in stead of filters as described in range filter and it doesn't seem to have any affect on returned result.

What Im trying to say is that I don't want to create prepopulated facet with dates, but provide the user an date input field where he can freely pick an date, and then this date is used to filter search results.

Request payload sent to App Search:

 "facets": {
    "published_timestamp": {
      "type": "range",
      "ranges": [
        {
          "from": "2020-12-17T00:00:00.000Z",
          "to": "2020-12-17T23:59:59.000Z"
        }
      ]
    }
  },

SearchProvider config:

const config = {
    searchQuery: {
      facets: {
        published_timestamp: {
          type: "range",
          ranges: [
            {
              from: new Date(selectedDate).toISOString(),
              to: add(new Date(selectedDate), {hours: 23, minutes: 59, seconds: 59}).toISOString(),
            }
          ]
        },
      },
      ...buildSearchOptionsFromConfig()
    },

Manually invoking Search API with filters field included in request does what Im trying to achieve:

{
    "query": "Product A",
    "filters": {
        "published_timestamp": {
            "from": "2020-12-15T00:00:00.000Z",
            "to": "2020-12-15T23:59:59.000Z"
        }
    },
    "result_fields": {
        ...
    },
    "search_fields": {
        ...
    },
    "page": {
        ...
    }
}
4

Hey @ismarslomic,

Date selectors and date range selectors are both totally possible, and don't require facets to achieve.

You need to build your own component that calls the setFilters action to apply the selected filter.

5

Thanks @JasonStoltz! I have tried to use setFilters as well, but didn't find a way to define filter range in this method. Could you please help me with an example on how to achieve following filter-expression in request body by using setFilters?

"filters": {
    "published_timestamp": {
         "from": "2020-12-15T00:00:00.000Z",
         "to": "2020-12-15T23:59:59.000Z"
    }
}
6

Good point, I noticed the documentation doesn't really explain the parameters that setFilter takes. It would be super helpful if we could get TypeScript definitions created for this project... in the meantime I updated the docs.

If you looks at the definition for FilterValue you can see what to pass in here.

setFilter(
    "published_timestamp",
   {
     "from": "2020-12-15T00:00:00.000Z",
     "to": "2020-12-15T23:59:59.000Z",
     "name": "Published Timestamp"
  }
)
2 Likes
7

Thanks! This works like a charm!

I have been trying to explore the PropTypes, but agree that TypeScript defs would be really helpful!

2 Likes
8

Quick follow up question: calling setFilter works as expected (filters search results on specific date) when changing date in date input field, but it seems that the filter is cleared when changing search term in SearchBox. Anything I can do to keep existing filter when changing search term?

Edit: I can fix this by setting the shouldClearFilters to false in SearchBox

9

Nice. Glad you figured that out. Eventually we'd like to be able to mark filters as "sticky", so you can pick which filters do and do not reset when a new search term is entered.

2 Likes
10

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.