# Filter search by date in search-ui

**URL:** <https://discuss.elastic.co/t/filter-search-by-date-in-search-ui/258929>\
**Category:** Elastic Search\
**Tags:** elastic-app-search\
**Created:** [December 16, 2020, 11:43pm UTC](https://discuss.elastic.co/t/filter-search-by-date-in-search-ui/258929 "2020-12-16T23:43:46Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ismarslomic](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ismarslomic/32/63870_2.png) [@ismarslomic](https://discuss.elastic.co/u/ismarslomic)\
**Post date:** [December 16, 2020, 11:43pm UTC](https://discuss.elastic.co/t/filter-search-by-date-in-search-ui/258929/1 "2020-12-16T23:43:46Z")

</div>

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](https://www.elastic.co/guide/en/app-search/current/filters.html#filters-range-filters) in search-ui?

---

<div class="post-metadata">

**Author:** ![Brian\_McGue](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/brian_mcgue/32/63366_2.png) [@Brian\_McGue](https://discuss.elastic.co/u/Brian_McGue)\
**Post date:** [December 17, 2020, 2:08am UTC](https://discuss.elastic.co/t/filter-search-by-date-in-search-ui/258929/2 "2020-12-17T02:08:46Z")

</div>

Hi @ismarslomic!

If you check out the [Code Sandbox](https://codesandbox.io/s/national-parks-example-kdyms?fontsize=14) that is linked in Search UI's [README](https://github.com/elastic/search-ui/blob/master/README.md) 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

---

<div class="post-metadata">

**Author:** ![ismarslomic](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ismarslomic/32/63870_2.png) [@ismarslomic](https://discuss.elastic.co/u/ismarslomic)\
**Post date:** [December 17, 2020, 6:55am UTC](https://discuss.elastic.co/t/filter-search-by-date-in-search-ui/258929/3 "2020-12-17T06:55:08Z")

</div>

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](https://www.elastic.co/guide/en/app-search/current/filters.html#filters-range-filters) 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": {
        ...
    }
}
```

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [December 17, 2020, 12:58pm UTC](https://discuss.elastic.co/t/filter-search-by-date-in-search-ui/258929/4 "2020-12-17T12:58:08Z")

</div>

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](https://github.com/elastic/search-ui/blob/master/ADVANCED.md#build-your-own-component) that calls the [setFilters](https://github.com/elastic/search-ui/blob/master/ADVANCED.md#actions) action to apply the selected filter.

---

<div class="post-metadata">

**Author:** ![ismarslomic](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ismarslomic/32/63870_2.png) [@ismarslomic](https://discuss.elastic.co/u/ismarslomic)\
**Post date:** [December 17, 2020, 1:15pm UTC](https://discuss.elastic.co/t/filter-search-by-date-in-search-ui/258929/5 "2020-12-17T13:15:12Z")

</div>

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`?

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

```

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [December 17, 2020, 1:37pm UTC](https://discuss.elastic.co/t/filter-search-by-date-in-search-ui/258929/6 "2020-12-17T13:37:58Z")

</div>

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](https://github.com/elastic/search-ui/pull/529).

If you looks at the definition for [FilterValue](https://github.com/elastic/search-ui/blob/master/packages/react-search-ui/src/types/FilterValue.js) you can see what to pass in here.

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

```

---

<div class="post-metadata">

**Author:** ![ismarslomic](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ismarslomic/32/63870_2.png) [@ismarslomic](https://discuss.elastic.co/u/ismarslomic)\
**Post date:** [December 17, 2020, 2:15pm UTC](https://discuss.elastic.co/t/filter-search-by-date-in-search-ui/258929/7 "2020-12-17T14:15:08Z")

</div>

Thanks! This works like a charm!

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

---

<div class="post-metadata">

**Author:** ![ismarslomic](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ismarslomic/32/63870_2.png) [@ismarslomic](https://discuss.elastic.co/u/ismarslomic)\
**Post date:** [December 18, 2020, 9:40am UTC](https://discuss.elastic.co/t/filter-search-by-date-in-search-ui/258929/8 "2020-12-18T09:40:09Z")

</div>

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`

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [December 18, 2020, 1:53pm UTC](https://discuss.elastic.co/t/filter-search-by-date-in-search-ui/258929/9 "2020-12-18T13:53:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [January 15, 2021, 1:53pm UTC](https://discuss.elastic.co/t/filter-search-by-date-in-search-ui/258929/10 "2021-01-15T13:53:38Z")

</div>

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