diff --git a/invenio_app_ils/config.py b/invenio_app_ils/config.py
index 349008e65..78c21aefb 100644
--- a/invenio_app_ils/config.py
+++ b/invenio_app_ils/config.py
@@ -1192,7 +1192,8 @@ def _(x):
         ),
         filters={
             "returns.end_date": overdue_loans_filter("end_date"),
-            "loan.start_date": date_range_filter("start_date"),
+            "loans_from_date": date_range_filter("start_date", "gte"),
+            "loans_to_date": date_range_filter("start_date", "lte"),
         },
         post_filters=dict(
             state=terms_filter("state"),
diff --git a/invenio_app_ils/facets.py b/invenio_app_ils/facets.py
index a07f0b01a..448d0f4b9 100644
--- a/invenio_app_ils/facets.py
+++ b/invenio_app_ils/facets.py
@@ -114,20 +114,14 @@ def overdue_agg():
     )
 
 
-# loan.start_date:2020-02-02,2020-12-30
-def date_range_filter(field):
+def date_range_filter(field, comparator):
     """Create a range filter.
 
     :param field: Field name.
-    :param values[0]: string with comma separated fromDate and toDate.
+    :param comparator: Comparison we want with the supplied date.
     """
     def inner(values):
-        fromDate, toDate = values[0].split(',')
-        params = {}
-        if fromDate:
-            params["gte"] = str(arrow.get(fromDate).date())
-        if toDate:
-            params["lte"] = str(arrow.get(toDate).date())
-        return Range(**{field: params})
-
+        return Range(**{
+            field: {comparator: str(arrow.get(values[0]).date())}
+        })
     return inner
diff --git a/ui/src/components/SearchControls/components/SearchDateRange/SearchDateRange.js b/ui/src/components/SearchControls/components/SearchDateRange/SearchDateRange.js
index 40066c28d..b5a8bb955 100644
--- a/ui/src/components/SearchControls/components/SearchDateRange/SearchDateRange.js
+++ b/ui/src/components/SearchControls/components/SearchDateRange/SearchDateRange.js
@@ -1,9 +1,8 @@
 import React, { Component } from 'react';
 import { Card } from 'semantic-ui-react';
 import { DatePicker } from '@components';
-import { withState, onQueryChanged } from 'react-searchkit';
-import _fromPairs from 'lodash/fromPairs';
-import _toPairs from 'lodash/toPairs';
+import { withState } from 'react-searchkit';
+import _isEmpty from 'lodash/isEmpty';
 import _cloneDeep from 'lodash/cloneDeep';
 
 class _SearchDateRange extends Component {
@@ -15,24 +14,22 @@ class _SearchDateRange extends Component {
 
   parseUrlDates = () => {
     const { filters } = this.props.currentQueryState;
-    const filtersObj = _fromPairs(filters);
-    const dateFilter = filtersObj['loan.start_date'];
-    if (dateFilter) return dateFilter.split(',');
-    return ['', ''];
+    let fromDate = '';
+    let toDate = '';
+    filters.map(filter => {
+      if (filter[0] === 'loans_from_date') fromDate = filter[1];
+      if (filter[0] === 'loans_to_date') toDate = filter[1];
+    });
+    return [fromDate, toDate];
   };
 
   updateFilters = () => {
     const newQuery = _cloneDeep(this.props.currentQueryState);
-    const filtersObj = _fromPairs(newQuery.filters);
-    filtersObj[
-      'loan.start_date'
-    ] = `${this.state.fromDate},${this.state.toDate}`;
-    newQuery.filters = _toPairs(filtersObj);
-
-    // NOTE: since its wrapped with `withState` when the pr is merged
-    // (https://github.com/inveniosoftware/react-searchkit/pull/100) we could
-    // use this.props.updateStateQuery(newQuery) instead of the events.
-    onQueryChanged({ searchQuery: newQuery });
+    if (!_isEmpty(this.state.fromDate))
+      newQuery.filters.push(['loans_from_date', `${this.state.fromDate}`]);
+    if (!_isEmpty(this.state.toDate))
+      newQuery.filters.push(['loans_to_date', `${this.state.toDate}`]);
+    this.props.updateQueryState(newQuery);
   };
 
   render() {
@@ -49,9 +46,9 @@ class _SearchDateRange extends Component {
             maxDate={this.state.toDate}
             defaultValue={this.state.fromDate}
             placeholder="From"
-            handleDateChange={value =>
-              this.setState({ fromDate: value }, this.updateFilters)
-            }
+            handleDateChange={value => {
+              this.setState({ fromDate: value }, this.updateFilters);
+            }}
           />
         </Card.Content>
         <Card.Content>