diff --git a/src/components/date/datepickerWithRange.vue b/src/components/date/datepickerWithRange.vue
index 1816fa2fc..a5aec3f98 100644
--- a/src/components/date/datepickerWithRange.vue
+++ b/src/components/date/datepickerWithRange.vue
@@ -25,7 +25,7 @@
 							{{ $t('input.datepickerRange.from') }}
 							<div class="field has-addons">
 								<div class="control is-fullwidth">
-									<input class="input" type="text" v-model="from" @change="emitChanged"/>
+									<input class="input" type="text" v-model="from" @change="inputChanged"/>
 								</div>
 								<div class="control">
 									<x-button icon="calendar" variant="secondary" data-toggle/>
@@ -36,7 +36,7 @@
 							{{ $t('input.datepickerRange.to') }}
 							<div class="field has-addons">
 								<div class="control is-fullwidth">
-									<input class="input" type="text" v-model="to" @change="emitChanged"/>
+									<input class="input" type="text" v-model="to" @change="inputChanged"/>
 								</div>
 								<div class="control">
 									<x-button icon="calendar" variant="secondary" data-toggle/>
@@ -93,6 +93,11 @@ function emitChanged() {
 	})
 }
 
+function inputChanged() {
+	flatpickrRange.value = ''
+	emitChanged()
+}
+
 watch(
 	() => flatpickrRange.value,
 	(newVal: string | null) => {
@@ -117,7 +122,7 @@ function setDateRange(range: string[] | null) {
 	if (range === null) {
 		from.value = ''
 		to.value = ''
-		emitChanged()
+		inputChanged()
 
 		return
 	}
@@ -125,7 +130,7 @@ function setDateRange(range: string[] | null) {
 	from.value = range[0]
 	to.value = range[1]
 
-	emitChanged()
+	inputChanged()
 }
 
 const dateRanges = {