diff --git a/frontend/express/public/javascripts/countly/vue/components/date.js b/frontend/express/public/javascripts/countly/vue/components/date.js
index b7b993f95bf..6b3188a6462 100644
--- a/frontend/express/public/javascripts/countly/vue/components/date.js
+++ b/frontend/express/public/javascripts/countly/vue/components/date.js
@@ -730,6 +730,10 @@
                 },
                 required: false
             },
+            disabledRangeModes: {
+                type: [Array, Boolean],
+                default: false
+            },
             popClass: {
                 type: String
             }
@@ -1021,6 +1025,9 @@
                     });
                     this.doClose();
                 }
+            },
+            isRangeModeEnabled: function(mode) {
+                return this.disabledRangeModes && !this.disabledRangeModes.includes(mode);
             }
         },
         beforeDestroy: function() {
diff --git a/frontend/express/public/javascripts/countly/vue/templates/datepicker.html b/frontend/express/public/javascripts/countly/vue/templates/datepicker.html
index 70cdc66fd23..90c9e4c6eb2 100644
--- a/frontend/express/public/javascripts/countly/vue/templates/datepicker.html
+++ b/frontend/express/public/javascripts/countly/vue/templates/datepicker.html
@@ -42,7 +42,7 @@
         <div class="cly-vue-daterp__calendars-col" v-if="isVisible && customRangeSelection">
             <div class="cly-vue-daterp__input-methods" :class="{'cly-vue-daterp__hidden-tabs': !showRelativeModes || !isRange}">
                 <el-tabs v-model="rangeMode" @tab-click="handleTabChange">
-                    <el-tab-pane name="inBetween">
+                    <el-tab-pane name="inBetween" v-if="isRangeModeEnabled('inBetween')">
                         <template slot="label">
                             <span class="text-medium font-weight-bold">{{i18n('common.time-period-select.range')}}</span>
                         </template>
@@ -64,7 +64,7 @@
                             </template>
                         </div>
                     </el-tab-pane>
-                    <el-tab-pane name="since">
+                    <el-tab-pane name="since" v-if="isRangeModeEnabled('since')">
                         <template slot="label">
                             <span class="text-medium font-weight-bold">{{i18n('common.time-period-select.since')}}</span>
                         </template>
@@ -72,7 +72,7 @@
                             <el-input size="small" :class="{'is-error': sinceInput.raw.invalid0}" v-model="sinceInput.raw.text" @blur="handleSinceBlur"></el-input>
                         </div>
                     </el-tab-pane>
-                    <el-tab-pane name="inTheLast">
+                    <el-tab-pane name="inTheLast" v-if="isRangeModeEnabled('inTheLast')">
                         <template slot="label">
                             <span class="text-medium font-weight-bold">{{i18n('common.time-period-select.last-n')}}</span>
                         </template>
@@ -85,7 +85,7 @@
                             </el-select>
                         </div>
                     </el-tab-pane>
-                    <el-tab-pane name="onm" v-if="allowOnSelection">
+                    <el-tab-pane name="onm" v-if="allowOnSelection && isRangeModeEnabled('onm')">
                         <template slot="label"><span class="text-medium font-weight-bold">{{i18n('common.time-period-select.on')}}</span></template>
                         <div class="cly-vue-daterp__input-wrapper">
                             <el-input size="small" :class="{'is-error': onmInput.raw.invalid0}" v-model="onmInput.raw.text" @blur="handleOnmBlur"></el-input>