diff --git a/src/components/date/datepickerWithRange.vue b/src/components/date/datepickerWithRange.vue
index 8b4b41cea..4438f84db 100644
--- a/src/components/date/datepickerWithRange.vue
+++ b/src/components/date/datepickerWithRange.vue
@@ -2,8 +2,8 @@
 	<div class="datepicker-with-range-container">
 		<popup>
 			<template #trigger="{toggle}">
-				<x-button @click.prevent.stop="toggle()" type="secondary" :shadow="false" class="mb-2">
-					{{ $t('task.show.select') }}
+				<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
+					{{ buttonText }}
 				</x-button>
 			</template>
 			<template #content="{isOpen}">
@@ -185,6 +185,13 @@ const {t} = useI18n()
 
 const emit = defineEmits(['dateChanged'])
 
+const props = defineProps({
+	showSelectedOnButton: {
+		type: Boolean,
+		default: false,
+	}
+})
+
 // FIXME: This seems to always contain the default value - that breaks the picker
 const weekStart = computed<number>(() => store.state.auth.settings.weekStart ?? 0)
 const flatPickerConfig = computed(() => ({
@@ -257,6 +264,17 @@ function setDateRange(range: string[] | null) {
 const customRangeActive = computed<Boolean>(() => {
 	return !Object.values(dateRanges).some(el => from.value === el[0] && to.value === el[1])
 })
+
+const buttonText = computed<string>(() => {
+	if(props.showSelectedOnButton && from.value !== '' && to.value !== '') {
+		return t('input.datepickerRange.fromto', {
+			from: from.value,
+			to: to.value,
+		})
+	}
+	
+	return t('task.show.select')
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 72e50bb6e..adcd32722 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -520,6 +520,7 @@
     "datepickerRange": {
       "to": "To",
       "from": "From",
+      "fromto": "{from} to {to}",
       "math": {
         "canuse": "You can use date math to filter for relative dates.",
         "learnhow": "Check out how it works",