From 27bb80d11aaa84311c15ed31f7aaa7c02b19af24 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 8 Jun 2026 15:16:16 +0200
Subject: [PATCH] feat(input): add quick-select shortcuts to the Datepicker

---
 frontend/src/components/input/Datepicker.vue  |  11 +-
 .../src/components/input/DatepickerInline.vue | 133 +++++++++---------
 2 files changed, 79 insertions(+), 65 deletions(-)

diff --git a/frontend/src/components/input/Datepicker.vue b/frontend/src/components/input/Datepicker.vue
index b3f55888c..2f1de652c 100644
--- a/frontend/src/components/input/Datepicker.vue
+++ b/frontend/src/components/input/Datepicker.vue
@@ -5,7 +5,10 @@
 			:disabled="disabled || undefined"
 			@click.stop="toggleDatePopup"
 		>
-			{{ date === null ? chooseDateLabel : formatDisplayDate(date) }}
+			<i v-if="date === null && emptyLabel !== ''">{{ emptyLabel }}</i>
+			<template v-else>
+				{{ date === null ? chooseDateLabel : formatDisplayDate(date) }}
+			</template>
 		</SimpleButton>
 
 		<CustomTransition name="fade">
@@ -16,6 +19,7 @@
 			>
 				<DatepickerInline
 					v-model="date"
+					:show-shortcuts="showShortcuts"
 					@update:modelValue="updateData"
 				/>
 
@@ -48,12 +52,17 @@ const props = withDefaults(defineProps<{
 	modelValue: Date | null | string,
 	chooseDateLabel?: string,
 	disabled?: boolean,
+	showShortcuts?: boolean,
+	// When the value is null, show this (italic) instead of chooseDateLabel.
+	emptyLabel?: string,
 }>(), {
 	chooseDateLabel: () => {
 		const {t} = useI18n({useScope: 'global'})
 		return t('input.datepicker.chooseDate')
 	},
 	disabled: false,
+	showShortcuts: true,
+	emptyLabel: '',
 })
 
 const emit = defineEmits<{
diff --git a/frontend/src/components/input/DatepickerInline.vue b/frontend/src/components/input/DatepickerInline.vue
index 9f0467889..2245b0043 100644
--- a/frontend/src/components/input/DatepickerInline.vue
+++ b/frontend/src/components/input/DatepickerInline.vue
@@ -1,66 +1,68 @@
 <template>
-	<BaseButton
-		v-if="(new Date()).getHours() < 21"
-		class="datepicker__quick-select-date"
-		@click.stop="setDate('today')"
-	>
-		<span class="icon"><Icon :icon="['far', 'calendar-alt']" /></span>
-		<span class="text">
-			<span>{{ $t('input.datepicker.today') }}</span>
-			<span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span>
-		</span>
-	</BaseButton>
-	<BaseButton
-		class="datepicker__quick-select-date"
-		@click.stop="setDate('tomorrow')"
-	>
-		<span class="icon"><Icon :icon="['far', 'sun']" /></span>
-		<span class="text">
-			<span>{{ $t('input.datepicker.tomorrow') }}</span>
-			<span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span>
-		</span>
-	</BaseButton>
-	<BaseButton
-		class="datepicker__quick-select-date"
-		@click.stop="setDate('nextMonday')"
-	>
-		<span class="icon"><Icon icon="coffee" /></span>
-		<span class="text">
-			<span>{{ $t('input.datepicker.nextMonday') }}</span>
-			<span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span>
-		</span>
-	</BaseButton>
-	<BaseButton
-		v-if="!((new Date()).getDay() === 0 && (new Date()).getHours() >= 21)"
-		class="datepicker__quick-select-date"
-		@click.stop="setDate('thisWeekend')"
-	>
-		<span class="icon"><Icon icon="cocktail" /></span>
-		<span class="text">
-			<span>{{ $t('input.datepicker.thisWeekend') }}</span>
-			<span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span>
-		</span>
-	</BaseButton>
-	<BaseButton
-		class="datepicker__quick-select-date"
-		@click.stop="setDate('laterThisWeek')"
-	>
-		<span class="icon"><Icon icon="chess-knight" /></span>
-		<span class="text">
-			<span>{{ $t('input.datepicker.laterThisWeek') }}</span>
-			<span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span>
-		</span>
-	</BaseButton>
-	<BaseButton
-		class="datepicker__quick-select-date"
-		@click.stop="setDate('nextWeek')"
-	>
-		<span class="icon"><Icon icon="forward" /></span>
-		<span class="text">
-			<span>{{ $t('input.datepicker.nextWeek') }}</span>
-			<span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span>
-		</span>
-	</BaseButton>
+	<template v-if="showShortcuts">
+		<BaseButton
+			v-if="(new Date()).getHours() < 21"
+			class="datepicker__quick-select-date"
+			@click.stop="setDate('today')"
+		>
+			<span class="icon"><Icon :icon="['far', 'calendar-alt']" /></span>
+			<span class="text">
+				<span>{{ $t('input.datepicker.today') }}</span>
+				<span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span>
+			</span>
+		</BaseButton>
+		<BaseButton
+			class="datepicker__quick-select-date"
+			@click.stop="setDate('tomorrow')"
+		>
+			<span class="icon"><Icon :icon="['far', 'sun']" /></span>
+			<span class="text">
+				<span>{{ $t('input.datepicker.tomorrow') }}</span>
+				<span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span>
+			</span>
+		</BaseButton>
+		<BaseButton
+			class="datepicker__quick-select-date"
+			@click.stop="setDate('nextMonday')"
+		>
+			<span class="icon"><Icon icon="coffee" /></span>
+			<span class="text">
+				<span>{{ $t('input.datepicker.nextMonday') }}</span>
+				<span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span>
+			</span>
+		</BaseButton>
+		<BaseButton
+			v-if="!((new Date()).getDay() === 0 && (new Date()).getHours() >= 21)"
+			class="datepicker__quick-select-date"
+			@click.stop="setDate('thisWeekend')"
+		>
+			<span class="icon"><Icon icon="cocktail" /></span>
+			<span class="text">
+				<span>{{ $t('input.datepicker.thisWeekend') }}</span>
+				<span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span>
+			</span>
+		</BaseButton>
+		<BaseButton
+			class="datepicker__quick-select-date"
+			@click.stop="setDate('laterThisWeek')"
+		>
+			<span class="icon"><Icon icon="chess-knight" /></span>
+			<span class="text">
+				<span>{{ $t('input.datepicker.laterThisWeek') }}</span>
+				<span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span>
+			</span>
+		</BaseButton>
+		<BaseButton
+			class="datepicker__quick-select-date"
+			@click.stop="setDate('nextWeek')"
+		>
+			<span class="icon"><Icon icon="forward" /></span>
+			<span class="text">
+				<span>{{ $t('input.datepicker.nextWeek') }}</span>
+				<span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span>
+			</span>
+		</BaseButton>
+	</template>
 
 	<div class="flatpickr-container">
 		<flat-pickr
@@ -87,9 +89,12 @@ import {useFlatpickrLanguage} from '@/helpers/useFlatpickrLanguage'
 import {useTimeFormat} from '@/composables/useTimeFormat'
 import {TIME_FORMAT} from '@/constants/timeFormat'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	modelValue: Date | null | string
-}>()
+	showShortcuts?: boolean
+}>(), {
+	showShortcuts: true,
+})
 
 const emit = defineEmits<{
 	'update:modelValue': [Date | null],