From 9f2f6442e4733f5be6c2a93446ca73c97c807fb0 Mon Sep 17 00:00:00 2001
From: Jesper Lauridsen <jela@kb.dk>
Date: Fri, 5 Dec 2025 08:52:48 +0100
Subject: [PATCH 1/6] new picker, updated methods

---
 src/components/common/TimePicker.vue          | 650 ++++++++++++++++++
 .../common/timeSearch/DayPicker.vue           | 100 +--
 src/types/CalendarTypes.ts                    |   8 +
 src/utils/datepicker-utils.ts                 |  52 +-
 4 files changed, 728 insertions(+), 82 deletions(-)
 create mode 100644 src/components/common/TimePicker.vue
 create mode 100644 src/types/CalendarTypes.ts

diff --git a/src/components/common/TimePicker.vue b/src/components/common/TimePicker.vue
new file mode 100644
index 00000000..4190f221
--- /dev/null
+++ b/src/components/common/TimePicker.vue
@@ -0,0 +1,650 @@
+<template>
+	<div
+		ref="root"
+		class="datepicker"
+		@keydown.esc="close"
+	>
+		<label
+			:for="inputId"
+			class="visually-hidden"
+		>
+			Select date
+		</label>
+
+		<div class="input-wrap">
+			<input
+				:id="inputId"
+				ref="input"
+				v-model="displayValue"
+				class="dp-input"
+				:aria-invalid="invalid"
+				:aria-describedby="hintId"
+				placeholder="DD-MM-YYYY"
+				autocomplete="off"
+				@keydown.enter.prevent="onInputEnter"
+			/>
+			<Transition name="fade">
+				<div
+					v-if="invalid"
+					class="error-container"
+				>
+					{{ t('datepicker.error', { start: formatErrorDate(startYear), end: formatErrorDate(endYear) }) }}
+				</div>
+			</Transition>
+			<button
+				type="button"
+				class="dp-toggle"
+				:aria-expanded="opened"
+				:aria-controls="calendarId"
+				:aria-label="opened ? 'Close calendar' : 'Open calendar'"
+				@click="toggle"
+			>
+				<span class="material-icons">event</span>
+			</button>
+		</div>
+
+		<p
+			:id="hintId"
+			class="visually-hidden"
+		>
+			Type a date in format DD-MM-YYYY or pick from the calendar.
+		</p>
+
+		<div
+			v-if="opened"
+			:id="calendarId"
+			ref="calendar"
+			class="dp-calendar"
+			role="dialog"
+			aria-modal="false"
+			:aria-labelledby="calendarHeadingId"
+		>
+			<div class="dp-calendar-header">
+				<div class="dp-calendar-selectors">
+					<div class="dp-selectors">
+						<select
+							v-model="selectedMonth"
+							@change="onMonthChange"
+						>
+							<option
+								v-for="(m, i) in monthNames"
+								:key="i"
+								:value="i"
+							>
+								{{ m }}
+							</option>
+						</select>
+
+						<select
+							v-model="selectedYear"
+							@change="onYearChange"
+						>
+							<option
+								v-for="y in yearRange"
+								:key="y"
+								:value="y"
+							>
+								{{ y }}
+							</option>
+						</select>
+					</div>
+				</div>
+				<div class="dp-calender-prev-next">
+					<button
+						type="button"
+						aria-label="Previous month"
+						@click="prevMonth"
+					>
+						‹
+					</button>
+					<h3 :id="calendarHeadingId">{{ monthTitle }}</h3>
+					<button
+						type="button"
+						aria-label="Next month"
+						@click="nextMonth"
+					>
+						›
+					</button>
+				</div>
+			</div>
+
+			<div
+				ref="grid"
+				role="grid"
+				class="dp-grid"
+			>
+				<div
+					role="row"
+					class="dp-weeknames"
+				>
+					<div
+						v-for="day in weekNames"
+						:key="day"
+						role="columnheader"
+						class="dp-weekname"
+					>
+						{{ day }}
+					</div>
+				</div>
+
+				<div role="rowgroup">
+					<div
+						v-for="(week, index) in weeks"
+						:key="index"
+						role="row"
+						class="dp-week"
+					>
+						<button
+							v-for="day in week"
+							:key="day.key"
+							class="dp-day"
+							:disabled="day.disabled ? true : false"
+							:class="{
+								'dp-day-selected': isSameDate(day.date, modelValue),
+								'dp-day-outside': !day.inMonth,
+							}"
+							role="gridcell"
+							:aria-selected="isSameDate(day.date, modelValue) ? 'true' : 'false'"
+							:tabindex="isSameDate(day.date, focusDate) ? 0 : -1"
+							:aria-label="day.ariaLabel"
+							:data-key="day.key"
+							@click="selectDay(day.date)"
+							@keydown="onDayKeydown($event, day)"
+						>
+							<span class="dp-day-label">{{ day.label }}</span>
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineProps, defineEmits, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { startYear, endYear } from './timeSearch/TimeSearchInitValues';
+import { CalendarDay } from '@/types/CalendarTypes';
+
+const props = defineProps({
+	modelValue: {
+		type: Date,
+		default: null,
+	},
+	startDate: {
+		type: Date,
+		default: null,
+	},
+	endDate: {
+		type: Date,
+		default: null,
+	},
+});
+const emit = defineEmits(['update:modelValue', 'check']);
+
+const { t, locale } = useI18n();
+
+const inputId = `dp-${Math.random().toString(36).slice(2, 9)}`;
+const calendarId = `dp-cal-${Math.random().toString(36).slice(2, 9)}`;
+const calendarHeadingId = `dp-h-${Math.random().toString(36).slice(2, 9)}`;
+const hintId = `dp-hint-${Math.random().toString(36).slice(2, 9)}`;
+
+const today = new Date();
+const opened = ref(false);
+const invalid = ref(false);
+
+const input = ref<HTMLInputElement>();
+const calendar = ref<HTMLDivElement>();
+
+const currentView = ref(
+	props.modelValue
+		? new Date(props.modelValue.getFullYear(), props.modelValue.getMonth(), 1)
+		: new Date(today.getFullYear(), today.getMonth(), 1),
+);
+
+const focusDate = ref(props.modelValue ? new Date(props.modelValue) : new Date(today));
+
+const monthNames = computed(() => {
+	const formatter = new Intl.DateTimeFormat(locale.value, { month: 'long' });
+	return Array.from({ length: 12 }, (_, i) => formatter.format(new Date(2000, i, 1)));
+});
+
+const weekNames = computed(() => {
+	const formatter = new Intl.DateTimeFormat(locale.value, { weekday: 'short' });
+	const base = new Date(2024, 0, 1);
+
+	return Array.from({ length: 7 }, (_, i) => {
+		const w = formatter.format(new Date(base.getFullYear(), base.getMonth(), base.getDate() + i));
+		return w.slice(0, 2);
+	});
+});
+
+const selectedMonth = ref(currentView.value.getMonth());
+const selectedYear = ref(currentView.value.getFullYear());
+
+function onMonthChange() {
+	currentView.value = new Date(selectedYear.value, selectedMonth.value, 1);
+	focusDate.value = new Date(selectedYear.value, selectedMonth.value, 1);
+}
+
+function onYearChange() {
+	if (minDate.value && selectedYear.value < minDate.value.getFullYear()) {
+		selectedYear.value = minDate.value.getFullYear();
+	}
+	if (maxDate.value && selectedYear.value > maxDate.value.getFullYear()) {
+		selectedYear.value = maxDate.value.getFullYear();
+	}
+	currentView.value = new Date(selectedYear.value, selectedMonth.value, 1);
+	focusDate.value = new Date(selectedYear.value, selectedMonth.value, 1);
+}
+
+watch(currentView, (v) => {
+	selectedMonth.value = v.getMonth();
+	selectedYear.value = v.getFullYear();
+});
+
+const yearRange = computed(() => {
+	const start = minDate.value ? minDate.value.getFullYear() : today.getFullYear() - 100;
+	const end = maxDate.value ? maxDate.value.getFullYear() : today.getFullYear() + 20;
+
+	const years = [];
+	for (let y = start; y <= end; y++) years.push(y);
+	return years;
+});
+
+const minDate = computed(() =>
+	props.startDate
+		? new Date(props.startDate.getFullYear(), props.startDate.getMonth(), props.startDate.getDate())
+		: null,
+);
+
+const maxDate = computed(() =>
+	props.endDate ? new Date(props.endDate.getFullYear(), props.endDate.getMonth(), props.endDate.getDate()) : null,
+);
+
+function monthIsBefore(date: Date, min: Date | null) {
+	if (!min) return false;
+	return (
+		date.getFullYear() < min.getFullYear() ||
+		(date.getFullYear() === min.getFullYear() && date.getMonth() < min.getMonth())
+	);
+}
+
+function monthIsAfter(date: Date, max: Date | null) {
+	if (!max) return false;
+	return (
+		date.getFullYear() > max.getFullYear() ||
+		(date.getFullYear() === max.getFullYear() && date.getMonth() > max.getMonth())
+	);
+}
+
+const formatErrorDate = (date: Date) => {
+	if (!(date instanceof Date)) return '';
+	return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear();
+};
+
+function formatDate(date: Date) {
+	if (!date) return '';
+	const dd = String(date.getDate()).padStart(2, '0');
+	const mm = String(date.getMonth() + 1).padStart(2, '0');
+	const yyyy = date.getFullYear();
+	return `${dd}-${mm}-${yyyy}`;
+}
+
+function parseInputToDate(str: string) {
+	const m = str.match(/^(\d{2})-(\d{2})-(\d{4})$/);
+	if (!m) return null;
+
+	const d = new Date(Number(m[3]), Number(m[2]) - 1, Number(m[1]));
+	if (isNaN(d.getTime())) return null;
+
+	return d;
+}
+
+function isSameDate(a: Date, b: Date) {
+	if (!(a instanceof Date) || !(b instanceof Date)) return false;
+	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+
+const displayValue = computed({
+	get() {
+		return formatDate(props.modelValue);
+	},
+	set(value) {
+		const d = parseInputToDate(value);
+		invalid.value = !d;
+		if (d) {
+			currentView.value = new Date(d.getFullYear(), d.getMonth(), 1);
+		}
+	},
+});
+
+function open() {
+	opened.value = true;
+	requestAnimationFrame(focusSelectedOrToday);
+}
+function close() {
+	opened.value = false;
+}
+function toggle() {
+	opened.value ? close() : open();
+}
+
+function onInputEnter() {
+	if (!invalid.value) close();
+}
+
+const monthTitle = computed(() =>
+	currentView.value.toLocaleString(locale.value, {
+		month: 'long',
+		year: 'numeric',
+	}),
+);
+
+function buildCalendar(year: number, month: number) {
+	const first = new Date(year, month, 1);
+	const startDay = (first.getDay() + 6) % 7;
+	const daysInMonth = new Date(year, month + 1, 0).getDate();
+	const totalCells = Math.ceil((startDay + daysInMonth) / 7) * 7;
+
+	const startDate = new Date(year, month, 1 - startDay);
+	const days: CalendarDay[] = [];
+
+	for (let i = 0; i < totalCells; i++) {
+		const date = new Date(startDate);
+		date.setDate(startDate.getDate() + i);
+
+		const isBeforeMin = !!minDate.value && date < minDate.value;
+		const isAfterMax = !!maxDate.value && date > maxDate.value;
+
+		const key = `${date.getDate()}-${date.getMonth()}-${date.getFullYear()}`;
+
+		days.push({
+			date: date,
+			label: date.getDate(),
+			inMonth: date.getMonth() === month,
+			key,
+			disabled: isBeforeMin || isAfterMax,
+			ariaLabel: date.toLocaleDateString(locale.value, {
+				weekday: 'long',
+				year: 'numeric',
+				month: 'long',
+				day: 'numeric',
+			}),
+		});
+	}
+
+	const weeks = [];
+	for (let i = 0; i < days.length; i += 7) {
+		weeks.push(days.slice(i, i + 7));
+	}
+	return weeks;
+}
+
+const weeks = computed(() => buildCalendar(currentView.value.getFullYear(), currentView.value.getMonth()));
+
+const flatDays = computed(() => weeks.value.flat());
+
+function focusSelectedOrToday() {
+	const key = props.modelValue
+		? `${props.modelValue.getFullYear()}-${props.modelValue.getMonth()}-${props.modelValue.getDate()}`
+		: `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
+
+	const el = calendar.value?.querySelector<HTMLElement>(`[data-key="${key}"]`);
+	el?.focus();
+}
+
+function prevMonth() {
+	const prev = new Date(currentView.value.getFullYear(), currentView.value.getMonth() - 1, 1);
+	if (!monthIsBefore(prev, minDate.value)) {
+		currentView.value = prev;
+		focusDate.value = new Date(prev);
+	}
+}
+
+function nextMonth() {
+	const next = new Date(currentView.value.getFullYear(), currentView.value.getMonth() + 1, 1);
+	if (!monthIsAfter(next, maxDate.value)) {
+		currentView.value = next;
+		focusDate.value = new Date(next);
+	}
+}
+
+function selectDay(date: Date) {
+	emit('update:modelValue', new Date(date));
+	currentView.value = new Date(date.getFullYear(), date.getMonth(), 1);
+	focusDate.value = new Date(date);
+	requestAnimationFrame(() => {
+		const key = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+		const el = calendar.value?.querySelector<HTMLElement>(`[data-key="${key}"]`);
+		el?.focus();
+	});
+}
+
+function onDayKeydown(e: KeyboardEvent, day: CalendarDay) {
+	const key = e.key;
+
+	const arrowKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+	const selectKeys = ['Enter', ' '];
+
+	if (![...arrowKeys, ...selectKeys].includes(key)) return;
+
+	if (day.disabled) {
+		e.preventDefault();
+		return;
+	}
+
+	e.preventDefault();
+
+	const allDays = flatDays.value;
+	const currentIndex = allDays.findIndex((d) => d.key === day.key);
+	if (currentIndex === -1) return;
+
+	if (selectKeys.includes(key)) {
+		return selectDay(day.date);
+	}
+	let targetIndex = currentIndex;
+	if (key === 'ArrowLeft') targetIndex -= 1;
+	if (key === 'ArrowRight') targetIndex += 1;
+	if (key === 'ArrowUp') targetIndex -= 7;
+	if (key === 'ArrowDown') targetIndex += 7;
+
+	let targetDay: CalendarDay | null = null;
+
+	if (targetIndex < 0 && key === 'ArrowUp') {
+		const prevMonth = new Date(currentView.value.getFullYear(), currentView.value.getMonth() - 1, 1);
+		const prevMonthWeeks = buildCalendar(prevMonth.getFullYear(), prevMonth.getMonth());
+		const lastWeek = prevMonthWeeks[prevMonthWeeks.length - 1];
+		const col = currentIndex % 7;
+		targetDay = lastWeek[col];
+		currentView.value = prevMonth;
+	} else if (targetIndex >= allDays.length && key === 'ArrowDown') {
+		const nextMonth = new Date(currentView.value.getFullYear(), currentView.value.getMonth() + 1, 1);
+		const nextMonthWeeks = buildCalendar(nextMonth.getFullYear(), nextMonth.getMonth());
+		const firstWeek = nextMonthWeeks[0];
+		const col = currentIndex % 7;
+		targetDay = firstWeek[col];
+		currentView.value = nextMonth;
+	} else if (targetIndex >= 0 && targetIndex < allDays.length) {
+		targetDay = allDays[targetIndex];
+		if (!targetDay.inMonth) {
+			currentView.value = new Date(targetDay.date.getFullYear(), targetDay.date.getMonth(), 1);
+		}
+	}
+	if (targetDay) {
+		requestAnimationFrame(() => {
+			const el = calendar.value?.querySelector<HTMLElement>(`[data-key="${targetDay.key}"]`);
+			el?.focus();
+		});
+	}
+}
+</script>
+
+<style scoped>
+.visually-hidden {
+	position: absolute !important;
+	height: 1px;
+	width: 1px;
+	overflow: hidden;
+	clip: rect(1px, 1px, 1px, 1px);
+}
+
+.dp-day-outside .dp-day-label {
+	color: #aaa; /* light grey */
+}
+
+.material-icons {
+	color: rgb(10, 46, 112);
+}
+
+.datepicker {
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+	align-items: center;
+}
+
+.dp-selectors {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+}
+
+.dp-selectors select {
+	padding: 4px 6px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	background: white;
+	text-align: center;
+}
+
+.input-wrap {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+}
+
+.dp-day-disabled {
+	color: #ccc;
+	opacity: 0.4;
+	cursor: default;
+	pointer-events: none;
+}
+
+.dp-input {
+	padding: 8px 10px;
+	width: calc(266px - 40px);
+	height: 20px;
+}
+.dp-toggle {
+	background: transparent;
+	border: 1px solid #ccc;
+	padding: 8px;
+	border-radius: 4px;
+	height: 40px;
+	width: 40px;
+}
+
+.dp-selectors select {
+	width: calc(50% - 5px);
+}
+
+.dp-calendar {
+	position: relative;
+	z-index: 50;
+	margin-top: 8px;
+	background: white;
+	border: 1px solid #ddd;
+	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
+	padding: 12px;
+	border-radius: 6px;
+}
+.dp-calendar-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 8px;
+	flex-direction: column;
+}
+
+.dp-calender-prev-next {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	width: 100%;
+	justify-content: space-between;
+}
+
+.dp-calendar-selectors {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+}
+
+.dp-grid {
+	display: block;
+}
+.dp-weeknames {
+	display: grid;
+	grid-template-columns: repeat(7, 36px);
+	gap: 4px;
+	margin-bottom: 6px;
+}
+
+.dp-weekname {
+	text-transform: capitalize;
+	display: flex;
+	justify-content: center;
+}
+
+.dp-week {
+	display: grid;
+	grid-template-columns: repeat(7, 36px);
+	gap: 4px;
+}
+.dp-day {
+	height: 36px;
+	width: 36px;
+	border: none;
+	background: transparent;
+	cursor: pointer;
+	border-radius: 4px;
+}
+.dp-day:focus {
+	outline: 2px solid #007acc;
+}
+.dp-day[aria-selected='true'],
+.dp-day-selected {
+	background-color: #007acc;
+	color: white;
+	font-weight: bold;
+}
+
+.error-container {
+	width: 50%;
+	position: absolute;
+	height: fit-content;
+	left: 65px;
+	top: -45px;
+	color: white;
+	padding: 5px;
+	background-color: rgb(184, 0, 0);
+	box-sizing: border-box;
+	z-index: 200;
+	bottom: -5px;
+}
+
+.error-container:before {
+	content: '';
+	display: block;
+	width: 0;
+	height: 0;
+	border-left: 7px solid transparent;
+	border-right: 7px solid transparent;
+	border-top: 7px solid rgb(184, 0, 0);
+	bottom: -7px;
+	position: absolute;
+	left: 50%;
+	transform: translate(-50%, 0%);
+}
+</style>
diff --git a/src/components/common/timeSearch/DayPicker.vue b/src/components/common/timeSearch/DayPicker.vue
index b9deb8c4..992a85bc 100644
--- a/src/components/common/timeSearch/DayPicker.vue
+++ b/src/components/common/timeSearch/DayPicker.vue
@@ -2,38 +2,11 @@
 	<div class="day-picker container">
 		<div class="picker-container">
 			<span class="date-span">{{ t('datepicker.date') }}:</span>
-			<VueDatePicker
-				ref="singleDatePicker"
+			<TimePicker
 				v-model="selectedDate"
-				:inline="{ input: true }"
-				:enable-time-picker="false"
-				:locale="locale"
-				auto-apply
-				no-today
-				:text-input="textInputOptions"
-				:format="format"
-				six-weeks="fair"
-				:month-change-on-scroll="false"
-				:min-date="startYear"
-				:max-date="endYear"
-				prevent-min-max-navigation
-				:year-range="[startYear.getFullYear(), endYear.getFullYear()]"
-				:state="validDate"
-				allow-null="true"
-				@update:model-value="updateSeeMoreLink()"
-				@update-month-year="HandleMonthYear"
-				@keydown="setupInputTimer"
-				@keydown.enter="executeUpdate($event)"
-				@blur="validDate = true"
-			></VueDatePicker>
-			<Transition name="fade">
-				<div
-					v-if="!validDate"
-					class="error-container"
-				>
-					{{ t('datepicker.error', { start: formatDate(startYear), end: formatDate(endYear) }) }}
-				</div>
-			</Transition>
+				:start-date="startYear"
+				:end-date="endYear"
+			/>
 		</div>
 		<div class="time-container">
 			<router-link
@@ -52,7 +25,6 @@
 <script lang="ts">
 import { defineComponent, onMounted, ref, watch } from 'vue';
 import type { DatePickerInstance } from '@vuepic/vue-datepicker';
-import VueDatePicker from '@vuepic/vue-datepicker';
 import {
 	days,
 	endDate,
@@ -66,7 +38,8 @@ import { RouteLocationRaw } from 'vue-router';
 import { addTestDataEnrichment } from '@/utils/test-enrichments';
 import { resetAllSelectorValues } from '@/utils/time-search-utils';
 import { useI18n } from 'vue-i18n';
-import { updateSelectedDate } from '@/utils/datepicker-utils';
+import { updateDate } from '@/utils/datepicker-utils';
+import TimePicker from '../TimePicker.vue';
 
 interface MonthYearEvent {
 	instance: number;
@@ -77,13 +50,13 @@ interface MonthYearEvent {
 export default defineComponent({
 	name: 'DayPicker',
 	components: {
-		VueDatePicker,
+		TimePicker,
 	},
 	setup() {
 		let inputTimer: ReturnType<typeof setTimeout> | null = null;
 
 		const singleDatePicker = ref<DatePickerInstance>();
-		const selectedDate = ref<Date | null>(new Date(2015, 0, 1, 0, 0, 0));
+		const selectedDate = ref<Date>(new Date(2015, 0, 1, 0, 0, 0));
 		const singleDayStartDate = ref<Date>(new Date(2015, 0, 1, 0, 0, 0)); // January 1, 2015, 00:00:00
 		const singleDayEndDate = ref<Date>(new Date(2015, 0, 1, 23, 59, 59)); // January 1, 2015, 23:59:59
 
@@ -126,28 +99,20 @@ export default defineComponent({
 				if (inputTimer !== null) {
 					clearTimeout(inputTimer);
 				}
-				updateSeeMoreLink();
+				updateDate(inputTimer, validDate, selectedDate, updateSeeMoreLink);
 			},
+			{ deep: true },
 		);
 
-		const setupInputTimer = (e: Event) => {
+		const setupInputTimer = () => {
 			if (inputTimer !== null) {
 				clearTimeout(inputTimer);
 			}
 			inputTimer = setTimeout(() => {
-				updateSelectedDate(e, inputTimer, validDate, selectedDate, updateSeeMoreLink);
+				updateDate(inputTimer, validDate, selectedDate, updateSeeMoreLink);
 			}, 750); // 750 milliseconds (0.75 second) delay
 		};
 
-		const formatDate = (date: Date) => {
-			if (!(date instanceof Date)) return '';
-			return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear();
-		};
-
-		const textInputOptions = {
-			format: 'd-M-yyyy',
-		};
-
 		const specificDayLink = ref<RouteLocationRaw>({
 			name: 'Search',
 			query: {
@@ -175,8 +140,8 @@ export default defineComponent({
 			window.scrollTo({ top: 0, behavior: 'smooth' });
 		};
 
-		const executeUpdate = (e: Event) => {
-			updateSelectedDate(e, inputTimer, validDate, selectedDate, updateSeeMoreLink); // Pass .value here as well
+		const executeUpdate = () => {
+			updateDate(inputTimer, validDate, selectedDate, updateSeeMoreLink); // Pass .value here as well
 		};
 
 		const updateSeeMoreLink = () => {
@@ -239,13 +204,11 @@ export default defineComponent({
 			moveToSearchPage,
 			HandleMonthYear,
 			locale,
-			textInputOptions,
-			updateSelectedDate,
+			updateDate,
 			setupInputTimer,
 			inputTimer,
 			validDate,
 			executeUpdate,
-			formatDate,
 			t,
 		};
 	},
@@ -260,37 +223,12 @@ export default defineComponent({
 }
 
 .date-span {
-	width: 320px;
+	padding-bottom: 10px;
+	width: 302px;
 	position: relative;
 	display: block;
 }
 
-.error-container {
-	width: 50%;
-	position: absolute;
-	height: fit-content;
-	left: 0px;
-	top: 55px;
-	color: white;
-	padding: 5px;
-	background-color: rgb(184, 0, 0);
-	box-sizing: border-box;
-}
-
-.error-container:before {
-	content: '';
-	display: block;
-	width: 0;
-	height: 0;
-	border-left: 7px solid transparent;
-	border-right: 7px solid transparent;
-	border-bottom: 7px solid rgb(184, 0, 0);
-	top: -7px;
-	position: absolute;
-	left: 50%;
-	transform: translate(-50%, 0%);
-}
-
 .picker-container {
 	display: flex;
 	flex-direction: column;
@@ -377,8 +315,8 @@ export default defineComponent({
 	justify-content: space-around;
 	flex-direction: column;
 	align-items: center;
-	padding-top: 20px;
-	width: 320px;
+	padding-top: 0px;
+	width: 300px;
 	align-items: flex-end;
 	padding-left: 8px;
 	padding-right: 8px;
diff --git a/src/types/CalendarTypes.ts b/src/types/CalendarTypes.ts
new file mode 100644
index 00000000..b4a18d6a
--- /dev/null
+++ b/src/types/CalendarTypes.ts
@@ -0,0 +1,8 @@
+export interface CalendarDay {
+	date: Date;
+	label: number;
+	inMonth: boolean;
+	key: string;
+	disabled: boolean;
+	ariaLabel: string;
+}
diff --git a/src/utils/datepicker-utils.ts b/src/utils/datepicker-utils.ts
index aadc4b46..1483dc92 100644
--- a/src/utils/datepicker-utils.ts
+++ b/src/utils/datepicker-utils.ts
@@ -1,6 +1,56 @@
 import { endYear, startYear } from '@/components/common/timeSearch/TimeSearchInitValues';
 import { Ref } from 'vue';
 
+const updateDate = (
+	timer: ReturnType<typeof setTimeout> | null,
+	isDateValid: Ref<boolean>,
+	inputVar: Ref<Date>,
+	updateLink: () => void,
+) => {
+	if (timer) {
+		clearTimeout(timer);
+	}
+	const constructedDate =
+		inputVar.value.getDate() + '/' + Number(inputVar.value.getMonth() + 1) + '/' + inputVar.value.getFullYear();
+	const dateInput = constructedDate.replace(/[.-]/g, '/');
+	const splitDateInput = dateInput.split('/');
+	if (splitDateInput.length === 3) {
+		const [day, month, yearInitial] = splitDateInput.map(Number);
+		let year = yearInitial;
+		// Validate if day, month, and year are numbers
+		if (!isNaN(day) && !isNaN(month) && !isNaN(year)) {
+			// Months in JavaScript Date are 0-indexed, so subtract 1 from the month
+			if (year.toString().length === 2) {
+				if (year < Number(new Date().getFullYear().toString().slice(-2))) {
+					year = Number(`20${year}`);
+				} else {
+					year = Number(`19${year}`);
+				}
+			}
+			const setDate = new Date(year, month - 1, day);
+			// Ensure the date is valid
+			if (setDate.getDate() === day && setDate.getMonth() === month - 1 && setDate.getFullYear() === year) {
+				// Validate if the date is within the range
+				const minDate = new Date(startYear.value);
+				const maxDate = new Date(endYear.value);
+
+				if (setDate >= minDate && setDate <= maxDate) {
+					updateLink();
+					isDateValid.value = true;
+				} else {
+					isDateValid.value = false;
+				}
+			} else {
+				isDateValid.value = false;
+			}
+		} else {
+			isDateValid.value = false;
+		}
+	} else {
+		isDateValid.value = false;
+	}
+};
+
 const updateSelectedDate = (
 	e: Event,
 	timer: ReturnType<typeof setTimeout> | null,
@@ -54,4 +104,4 @@ const updateSelectedDate = (
 	}
 };
 
-export { updateSelectedDate };
+export { updateSelectedDate, updateDate };

From f7bba4d8ecc77fbe8505bd9e79fa5a6d77e166b5 Mon Sep 17 00:00:00 2001
From: Jesper Lauridsen <jela@kb.dk>
Date: Mon, 8 Dec 2025 14:40:00 +0100
Subject: [PATCH 2/6] improved based on comments from pbruun

---
 src/components/common/TimePicker.vue | 573 ++++++++++++++-------------
 src/locales/da.json                  |   6 +
 src/locales/en.json                  |   6 +
 src/utils/datepicker-utils.ts        |  10 +-
 4 files changed, 303 insertions(+), 292 deletions(-)

diff --git a/src/components/common/TimePicker.vue b/src/components/common/TimePicker.vue
index 4190f221..c77757ff 100644
--- a/src/components/common/TimePicker.vue
+++ b/src/components/common/TimePicker.vue
@@ -8,7 +8,7 @@
 			:for="inputId"
 			class="visually-hidden"
 		>
-			Select date
+			{{ t('calendar.select') }}
 		</label>
 
 		<div class="input-wrap">
@@ -22,6 +22,7 @@
 				placeholder="DD-MM-YYYY"
 				autocomplete="off"
 				@keydown.enter.prevent="onInputEnter"
+				@blur="onInputEnter"
 			/>
 			<Transition name="fade">
 				<div
@@ -36,7 +37,7 @@
 				class="dp-toggle"
 				:aria-expanded="opened"
 				:aria-controls="calendarId"
-				:aria-label="opened ? 'Close calendar' : 'Open calendar'"
+				:aria-label="opened ? t('calendar.close') : t('calendar.open')"
 				@click="toggle"
 			>
 				<span class="material-icons">event</span>
@@ -47,7 +48,7 @@
 			:id="hintId"
 			class="visually-hidden"
 		>
-			Type a date in format DD-MM-YYYY or pick from the calendar.
+			{{ t('calendar.explanation') }}
 		</p>
 
 		<div
@@ -107,7 +108,6 @@
 					</button>
 				</div>
 			</div>
-
 			<div
 				ref="grid"
 				role="grid"
@@ -126,7 +126,6 @@
 						{{ day }}
 					</div>
 				</div>
-
 				<div role="rowgroup">
 					<div
 						v-for="(week, index) in weeks"
@@ -138,7 +137,7 @@
 							v-for="day in week"
 							:key="day.key"
 							class="dp-day"
-							:disabled="day.disabled ? true : false"
+							:disabled="day.disabled"
 							:class="{
 								'dp-day-selected': isSameDate(day.date, modelValue),
 								'dp-day-outside': !day.inMonth,
@@ -160,324 +159,322 @@
 	</div>
 </template>
 
-<script setup lang="ts">
-import { ref, computed, defineProps, defineEmits, watch } from 'vue';
+<script lang="ts">
+import { defineComponent, ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { startYear, endYear } from './timeSearch/TimeSearchInitValues';
 import { CalendarDay } from '@/types/CalendarTypes';
+import { startYear, endYear } from './timeSearch/TimeSearchInitValues';
 
-const props = defineProps({
-	modelValue: {
-		type: Date,
-		default: null,
-	},
-	startDate: {
-		type: Date,
-		default: null,
-	},
-	endDate: {
-		type: Date,
-		default: null,
+export default defineComponent({
+	name: 'DatePicker',
+
+	props: {
+		modelValue: { type: Date, default: null },
+		startDate: { type: Date, default: null },
+		endDate: { type: Date, default: null },
 	},
-});
-const emit = defineEmits(['update:modelValue', 'check']);
 
-const { t, locale } = useI18n();
+	emits: ['update:modelValue', 'check'],
 
-const inputId = `dp-${Math.random().toString(36).slice(2, 9)}`;
-const calendarId = `dp-cal-${Math.random().toString(36).slice(2, 9)}`;
-const calendarHeadingId = `dp-h-${Math.random().toString(36).slice(2, 9)}`;
-const hintId = `dp-hint-${Math.random().toString(36).slice(2, 9)}`;
+	setup(props, { emit }) {
+		const { t, locale } = useI18n();
+		const inputTimer = ref<number | null>(null);
 
-const today = new Date();
-const opened = ref(false);
-const invalid = ref(false);
+		const today = new Date();
+		const opened = ref(false);
+		const invalid = ref(false);
 
-const input = ref<HTMLInputElement>();
-const calendar = ref<HTMLDivElement>();
+		const input = ref<HTMLInputElement>();
+		const calendar = ref<HTMLDivElement>();
 
-const currentView = ref(
-	props.modelValue
-		? new Date(props.modelValue.getFullYear(), props.modelValue.getMonth(), 1)
-		: new Date(today.getFullYear(), today.getMonth(), 1),
-);
+		const currentView = ref(
+			props.modelValue
+				? new Date(props.modelValue.getFullYear(), props.modelValue.getMonth(), 1)
+				: new Date(today.getFullYear(), today.getMonth(), 1),
+		);
 
-const focusDate = ref(props.modelValue ? new Date(props.modelValue) : new Date(today));
+		const focusDate = ref(props.modelValue ? new Date(props.modelValue) : new Date(today));
 
-const monthNames = computed(() => {
-	const formatter = new Intl.DateTimeFormat(locale.value, { month: 'long' });
-	return Array.from({ length: 12 }, (_, i) => formatter.format(new Date(2000, i, 1)));
-});
+		const inputId = `dp-${Math.random().toString(36).slice(2, 9)}`;
+		const calendarId = `dp-cal-${Math.random().toString(36).slice(2, 9)}`;
+		const calendarHeadingId = `dp-h-${Math.random().toString(36).slice(2, 9)}`;
+		const hintId = `dp-hint-${Math.random().toString(36).slice(2, 9)}`;
 
-const weekNames = computed(() => {
-	const formatter = new Intl.DateTimeFormat(locale.value, { weekday: 'short' });
-	const base = new Date(2024, 0, 1);
+		const monthNames = computed(() => {
+			const formatter = new Intl.DateTimeFormat(locale.value, { month: 'long' });
+			return Array.from({ length: 12 }, (_, i) => formatter.format(new Date(2000, i, 1)));
+		});
 
-	return Array.from({ length: 7 }, (_, i) => {
-		const w = formatter.format(new Date(base.getFullYear(), base.getMonth(), base.getDate() + i));
-		return w.slice(0, 2);
-	});
-});
+		const weekNames = computed(() => {
+			const formatter = new Intl.DateTimeFormat(locale.value, { weekday: 'short' });
+			const base = new Date(2024, 0, 1);
+			return Array.from({ length: 7 }, (_, i) =>
+				formatter.format(new Date(base.getFullYear(), base.getMonth(), base.getDate() + i)).slice(0, 2),
+			);
+		});
 
-const selectedMonth = ref(currentView.value.getMonth());
-const selectedYear = ref(currentView.value.getFullYear());
+		const selectedMonth = ref(currentView.value.getMonth());
+		const selectedYear = ref(currentView.value.getFullYear());
 
-function onMonthChange() {
-	currentView.value = new Date(selectedYear.value, selectedMonth.value, 1);
-	focusDate.value = new Date(selectedYear.value, selectedMonth.value, 1);
-}
+		const minDate = computed(() => (props.startDate ? new Date(props.startDate) : null));
+		const maxDate = computed(() => (props.endDate ? new Date(props.endDate) : null));
 
-function onYearChange() {
-	if (minDate.value && selectedYear.value < minDate.value.getFullYear()) {
-		selectedYear.value = minDate.value.getFullYear();
-	}
-	if (maxDate.value && selectedYear.value > maxDate.value.getFullYear()) {
-		selectedYear.value = maxDate.value.getFullYear();
-	}
-	currentView.value = new Date(selectedYear.value, selectedMonth.value, 1);
-	focusDate.value = new Date(selectedYear.value, selectedMonth.value, 1);
-}
+		const yearRange = computed(() => {
+			const start = minDate.value ? minDate.value.getFullYear() : today.getFullYear() - 100;
+			const end = maxDate.value ? maxDate.value.getFullYear() : today.getFullYear() + 20;
+			const arr = [];
+			for (let y = start; y <= end; y++) arr.push(y);
+			return arr;
+		});
 
-watch(currentView, (v) => {
-	selectedMonth.value = v.getMonth();
-	selectedYear.value = v.getFullYear();
-});
+		watch(currentView, (v) => {
+			selectedMonth.value = v.getMonth();
+			selectedYear.value = v.getFullYear();
+		});
 
-const yearRange = computed(() => {
-	const start = minDate.value ? minDate.value.getFullYear() : today.getFullYear() - 100;
-	const end = maxDate.value ? maxDate.value.getFullYear() : today.getFullYear() + 20;
+		function formatDate(date: Date | null) {
+			if (!date) return '';
+			const dd = String(date.getDate()).padStart(2, '0');
+			const mm = String(date.getMonth() + 1).padStart(2, '0');
+			const yyyy = date.getFullYear();
+			return `${dd}-${mm}-${yyyy}`;
+		}
 
-	const years = [];
-	for (let y = start; y <= end; y++) years.push(y);
-	return years;
-});
+		function parseInputToDate(str: string) {
+			const m = str.match(/^(\d{2})-(\d{2})-(\d{4})$/);
+			if (!m) return null;
+			const d = new Date(Number(m[3]), Number(m[2]) - 1, Number(m[1]));
+			return isNaN(d.getTime()) ? null : d;
+		}
 
-const minDate = computed(() =>
-	props.startDate
-		? new Date(props.startDate.getFullYear(), props.startDate.getMonth(), props.startDate.getDate())
-		: null,
-);
-
-const maxDate = computed(() =>
-	props.endDate ? new Date(props.endDate.getFullYear(), props.endDate.getMonth(), props.endDate.getDate()) : null,
-);
-
-function monthIsBefore(date: Date, min: Date | null) {
-	if (!min) return false;
-	return (
-		date.getFullYear() < min.getFullYear() ||
-		(date.getFullYear() === min.getFullYear() && date.getMonth() < min.getMonth())
-	);
-}
+		function isSameDate(a: Date, b: Date) {
+			if (!(a instanceof Date) || !(b instanceof Date)) return false;
+			return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+		}
 
-function monthIsAfter(date: Date, max: Date | null) {
-	if (!max) return false;
-	return (
-		date.getFullYear() > max.getFullYear() ||
-		(date.getFullYear() === max.getFullYear() && date.getMonth() > max.getMonth())
-	);
-}
+		const displayValue = ref(formatDate(props.modelValue));
 
-const formatErrorDate = (date: Date) => {
-	if (!(date instanceof Date)) return '';
-	return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear();
-};
-
-function formatDate(date: Date) {
-	if (!date) return '';
-	const dd = String(date.getDate()).padStart(2, '0');
-	const mm = String(date.getMonth() + 1).padStart(2, '0');
-	const yyyy = date.getFullYear();
-	return `${dd}-${mm}-${yyyy}`;
-}
+		watch(displayValue, (val) => {
+			if (inputTimer.value) clearTimeout(inputTimer.value);
 
-function parseInputToDate(str: string) {
-	const m = str.match(/^(\d{2})-(\d{2})-(\d{4})$/);
-	if (!m) return null;
+			inputTimer.value = window.setTimeout(() => {
+				const normalized = val.replace(/[^0-9]/g, (m, i) => (i === 2 || i === 5 ? '-' : ''));
+				if (normalized !== val) displayValue.value = normalized;
 
-	const d = new Date(Number(m[3]), Number(m[2]) - 1, Number(m[1]));
-	if (isNaN(d.getTime())) return null;
+				const parsed = parseInputToDate(normalized);
+				let isInvalid = !parsed;
 
-	return d;
-}
+				if (parsed) {
+					const year = parsed.getFullYear();
+					if (year < startYear.value.getFullYear() || year > endYear.value.getFullYear()) isInvalid = true;
+				}
 
-function isSameDate(a: Date, b: Date) {
-	if (!(a instanceof Date) || !(b instanceof Date)) return false;
-	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-}
+				invalid.value = isInvalid;
 
-const displayValue = computed({
-	get() {
-		return formatDate(props.modelValue);
-	},
-	set(value) {
-		const d = parseInputToDate(value);
-		invalid.value = !d;
-		if (d) {
-			currentView.value = new Date(d.getFullYear(), d.getMonth(), 1);
-		}
-	},
-});
+				emit('update:modelValue', parsed);
+			}, 700);
+		});
 
-function open() {
-	opened.value = true;
-	requestAnimationFrame(focusSelectedOrToday);
-}
-function close() {
-	opened.value = false;
-}
-function toggle() {
-	opened.value ? close() : open();
-}
+		function onInputEnter() {
+			const parsed = parseInputToDate(displayValue.value);
+			if (!parsed) {
+				invalid.value = true;
+				return;
+			}
+			selectDay(parsed);
+			close();
+		}
 
-function onInputEnter() {
-	if (!invalid.value) close();
-}
+		function selectDay(date: Date) {
+			emit('update:modelValue', new Date(date));
+			currentView.value = new Date(date.getFullYear(), date.getMonth(), 1);
+			focusDate.value = new Date(date);
+			displayValue.value = formatDate(date);
+
+			requestAnimationFrame(() => {
+				const key = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+				const el = calendar.value?.querySelector<HTMLElement>(`[data-key="${key}"]`);
+				el?.focus();
+			});
+		}
 
-const monthTitle = computed(() =>
-	currentView.value.toLocaleString(locale.value, {
-		month: 'long',
-		year: 'numeric',
-	}),
-);
-
-function buildCalendar(year: number, month: number) {
-	const first = new Date(year, month, 1);
-	const startDay = (first.getDay() + 6) % 7;
-	const daysInMonth = new Date(year, month + 1, 0).getDate();
-	const totalCells = Math.ceil((startDay + daysInMonth) / 7) * 7;
-
-	const startDate = new Date(year, month, 1 - startDay);
-	const days: CalendarDay[] = [];
-
-	for (let i = 0; i < totalCells; i++) {
-		const date = new Date(startDate);
-		date.setDate(startDate.getDate() + i);
-
-		const isBeforeMin = !!minDate.value && date < minDate.value;
-		const isAfterMax = !!maxDate.value && date > maxDate.value;
-
-		const key = `${date.getDate()}-${date.getMonth()}-${date.getFullYear()}`;
-
-		days.push({
-			date: date,
-			label: date.getDate(),
-			inMonth: date.getMonth() === month,
-			key,
-			disabled: isBeforeMin || isAfterMax,
-			ariaLabel: date.toLocaleDateString(locale.value, {
-				weekday: 'long',
-				year: 'numeric',
-				month: 'long',
-				day: 'numeric',
-			}),
-		});
-	}
+		function onMonthChange() {
+			currentView.value = new Date(selectedYear.value, selectedMonth.value, 1);
+			focusDate.value = new Date(selectedYear.value, selectedMonth.value, 1);
+		}
 
-	const weeks = [];
-	for (let i = 0; i < days.length; i += 7) {
-		weeks.push(days.slice(i, i + 7));
-	}
-	return weeks;
-}
+		function onYearChange() {
+			if (minDate.value && selectedYear.value < minDate.value.getFullYear())
+				selectedYear.value = minDate.value.getFullYear();
+			if (maxDate.value && selectedYear.value > maxDate.value.getFullYear())
+				selectedYear.value = maxDate.value.getFullYear();
+			currentView.value = new Date(selectedYear.value, selectedMonth.value, 1);
+			focusDate.value = new Date(selectedYear.value, selectedMonth.value, 1);
+		}
 
-const weeks = computed(() => buildCalendar(currentView.value.getFullYear(), currentView.value.getMonth()));
+		const monthTitle = computed(() =>
+			currentView.value.toLocaleString(locale.value, { month: 'long', year: 'numeric' }),
+		);
+
+		function buildCalendar(year: number, month: number) {
+			const first = new Date(year, month, 1);
+			const startDay = (first.getDay() + 6) % 7;
+			const daysInMonth = new Date(year, month + 1, 0).getDate();
+			const totalCells = Math.ceil((startDay + daysInMonth) / 7) * 7;
+			const startDate = new Date(year, month, 1 - startDay);
+			const days: CalendarDay[] = [];
+
+			for (let i = 0; i < totalCells; i++) {
+				const date = new Date(startDate);
+				date.setDate(startDate.getDate() + i);
+				const isBeforeMin = !!minDate.value && date < minDate.value;
+				const isAfterMax = !!maxDate.value && date > maxDate.value;
+				const key = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+
+				days.push({
+					date,
+					label: date.getDate(),
+					inMonth: date.getMonth() === month,
+					key,
+					disabled: isBeforeMin || isAfterMax,
+					ariaLabel: date.toLocaleDateString(locale.value, {
+						weekday: 'long',
+						year: 'numeric',
+						month: 'long',
+						day: 'numeric',
+					}),
+				});
+			}
+
+			const weeks = [];
+			for (let i = 0; i < days.length; i += 7) weeks.push(days.slice(i, i + 7));
+			return weeks;
+		}
 
-const flatDays = computed(() => weeks.value.flat());
+		const weeks = computed(() => buildCalendar(currentView.value.getFullYear(), currentView.value.getMonth()));
+		const flatDays = computed(() => weeks.value.flat());
 
-function focusSelectedOrToday() {
-	const key = props.modelValue
-		? `${props.modelValue.getFullYear()}-${props.modelValue.getMonth()}-${props.modelValue.getDate()}`
-		: `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
+		function focusSelectedOrToday() {
+			const key = props.modelValue
+				? `${props.modelValue.getFullYear()}-${props.modelValue.getMonth()}-${props.modelValue.getDate()}`
+				: `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
+			const el = calendar.value?.querySelector<HTMLElement>(`[data-key="${key}"]`);
+			el?.focus();
+		}
 
-	const el = calendar.value?.querySelector<HTMLElement>(`[data-key="${key}"]`);
-	el?.focus();
-}
+		function prevMonth() {
+			const prev = new Date(currentView.value.getFullYear(), currentView.value.getMonth() - 1, 1);
+			if (!(minDate.value && prev < minDate.value)) {
+				currentView.value = prev;
+				focusDate.value = new Date(prev);
+			}
+		}
 
-function prevMonth() {
-	const prev = new Date(currentView.value.getFullYear(), currentView.value.getMonth() - 1, 1);
-	if (!monthIsBefore(prev, minDate.value)) {
-		currentView.value = prev;
-		focusDate.value = new Date(prev);
-	}
-}
+		function nextMonth() {
+			const next = new Date(currentView.value.getFullYear(), currentView.value.getMonth() + 1, 1);
+			if (!(maxDate.value && next > maxDate.value)) {
+				currentView.value = next;
+				focusDate.value = new Date(next);
+			}
+		}
 
-function nextMonth() {
-	const next = new Date(currentView.value.getFullYear(), currentView.value.getMonth() + 1, 1);
-	if (!monthIsAfter(next, maxDate.value)) {
-		currentView.value = next;
-		focusDate.value = new Date(next);
-	}
-}
+		function onDayKeydown(e: KeyboardEvent, day: CalendarDay) {
+			const key = e.key;
+			const arrowKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+			const selectKeys = ['Enter', ' '];
+
+			if (![...arrowKeys, ...selectKeys].includes(key)) return;
+			if (day.disabled) {
+				e.preventDefault();
+				return;
+			}
+			e.preventDefault();
+
+			if (selectKeys.includes(key)) {
+				selectDay(day.date);
+				return;
+			}
+
+			let newDate = new Date(day.date);
+			if (key === 'ArrowLeft') newDate.setDate(newDate.getDate() - 1);
+			if (key === 'ArrowRight') newDate.setDate(newDate.getDate() + 1);
+			if (key === 'ArrowUp') newDate.setDate(newDate.getDate() - 7);
+			if (key === 'ArrowDown') newDate.setDate(newDate.getDate() + 7);
+
+			if (minDate.value && newDate < minDate.value) newDate = new Date(minDate.value);
+			if (maxDate.value && newDate > maxDate.value) newDate = new Date(maxDate.value);
+
+			if (
+				newDate.getMonth() !== currentView.value.getMonth() ||
+				newDate.getFullYear() !== currentView.value.getFullYear()
+			) {
+				currentView.value = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+			}
+
+			requestAnimationFrame(() => {
+				const key = `${newDate.getFullYear()}-${newDate.getMonth()}-${newDate.getDate()}`;
+				const el = calendar.value?.querySelector<HTMLElement>(`[data-key="${key}"]`);
+				el?.focus();
+			});
+		}
 
-function selectDay(date: Date) {
-	emit('update:modelValue', new Date(date));
-	currentView.value = new Date(date.getFullYear(), date.getMonth(), 1);
-	focusDate.value = new Date(date);
-	requestAnimationFrame(() => {
-		const key = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
-		const el = calendar.value?.querySelector<HTMLElement>(`[data-key="${key}"]`);
-		el?.focus();
-	});
-}
+		function formatErrorDate(date: Date) {
+			if (!(date instanceof Date)) return '';
+			return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
+		}
 
-function onDayKeydown(e: KeyboardEvent, day: CalendarDay) {
-	const key = e.key;
-
-	const arrowKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
-	const selectKeys = ['Enter', ' '];
-
-	if (![...arrowKeys, ...selectKeys].includes(key)) return;
-
-	if (day.disabled) {
-		e.preventDefault();
-		return;
-	}
-
-	e.preventDefault();
-
-	const allDays = flatDays.value;
-	const currentIndex = allDays.findIndex((d) => d.key === day.key);
-	if (currentIndex === -1) return;
-
-	if (selectKeys.includes(key)) {
-		return selectDay(day.date);
-	}
-	let targetIndex = currentIndex;
-	if (key === 'ArrowLeft') targetIndex -= 1;
-	if (key === 'ArrowRight') targetIndex += 1;
-	if (key === 'ArrowUp') targetIndex -= 7;
-	if (key === 'ArrowDown') targetIndex += 7;
-
-	let targetDay: CalendarDay | null = null;
-
-	if (targetIndex < 0 && key === 'ArrowUp') {
-		const prevMonth = new Date(currentView.value.getFullYear(), currentView.value.getMonth() - 1, 1);
-		const prevMonthWeeks = buildCalendar(prevMonth.getFullYear(), prevMonth.getMonth());
-		const lastWeek = prevMonthWeeks[prevMonthWeeks.length - 1];
-		const col = currentIndex % 7;
-		targetDay = lastWeek[col];
-		currentView.value = prevMonth;
-	} else if (targetIndex >= allDays.length && key === 'ArrowDown') {
-		const nextMonth = new Date(currentView.value.getFullYear(), currentView.value.getMonth() + 1, 1);
-		const nextMonthWeeks = buildCalendar(nextMonth.getFullYear(), nextMonth.getMonth());
-		const firstWeek = nextMonthWeeks[0];
-		const col = currentIndex % 7;
-		targetDay = firstWeek[col];
-		currentView.value = nextMonth;
-	} else if (targetIndex >= 0 && targetIndex < allDays.length) {
-		targetDay = allDays[targetIndex];
-		if (!targetDay.inMonth) {
-			currentView.value = new Date(targetDay.date.getFullYear(), targetDay.date.getMonth(), 1);
+		function open() {
+			opened.value = true;
+			requestAnimationFrame(focusSelectedOrToday);
 		}
-	}
-	if (targetDay) {
-		requestAnimationFrame(() => {
-			const el = calendar.value?.querySelector<HTMLElement>(`[data-key="${targetDay.key}"]`);
-			el?.focus();
-		});
-	}
-}
+		function close() {
+			opened.value = false;
+		}
+		function toggle() {
+			opened.value ? close() : open();
+		}
+
+		return {
+			t,
+			locale,
+			inputId,
+			calendarId,
+			calendarHeadingId,
+			hintId,
+			opened,
+			invalid,
+			input,
+			calendar,
+			currentView,
+			focusDate,
+			monthNames,
+			weekNames,
+			selectedMonth,
+			selectedYear,
+			yearRange,
+			minDate,
+			maxDate,
+			displayValue,
+			weeks,
+			flatDays,
+			monthTitle,
+			open,
+			close,
+			toggle,
+			onInputEnter,
+			onMonthChange,
+			onYearChange,
+			prevMonth,
+			nextMonth,
+			selectDay,
+			onDayKeydown,
+			isSameDate,
+			formatErrorDate,
+			startYear,
+			endYear,
+		};
+	},
+});
 </script>
 
 <style scoped>
@@ -502,6 +499,7 @@ function onDayKeydown(e: KeyboardEvent, day: CalendarDay) {
 	justify-content: center;
 	flex-direction: column;
 	align-items: center;
+	font-family: noway, sans-serif;
 }
 
 .dp-selectors {
@@ -516,6 +514,8 @@ function onDayKeydown(e: KeyboardEvent, day: CalendarDay) {
 	border-radius: 4px;
 	background: white;
 	text-align: center;
+	font-family: noway, sans-serif;
+	text-transform: capitalize;
 }
 
 .input-wrap {
@@ -535,6 +535,7 @@ function onDayKeydown(e: KeyboardEvent, day: CalendarDay) {
 	padding: 8px 10px;
 	width: calc(266px - 40px);
 	height: 20px;
+	font-family: noway, sans-serif;
 }
 .dp-toggle {
 	background: transparent;
@@ -575,6 +576,10 @@ function onDayKeydown(e: KeyboardEvent, day: CalendarDay) {
 	justify-content: space-between;
 }
 
+.dp-calender-prev-next h3 {
+	text-transform: capitalize;
+}
+
 .dp-calendar-selectors {
 	width: 100%;
 	display: flex;
diff --git a/src/locales/da.json b/src/locales/da.json
index 806c3858..2c7adcd3 100644
--- a/src/locales/da.json
+++ b/src/locales/da.json
@@ -543,5 +543,11 @@
       "maybeYouWantTo":"Eller måske vil du hellere:",
       "restoreFilters":"Gendanne filtre fra sidste søgning",
       "GoToFrontpage":"Til forsiden af DR-arkivet"
+   },
+   "calendar": {
+      "open":"Åben kalender",
+      "close": "Luk kalender",
+      "explanation": "Skriv en dato i formatet DD-MM-ÅÅÅÅ eller vælg fra kalenderen.",
+      "select": "Vælg dato"
    }
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 448d9fbf..d5e6c828 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -548,5 +548,11 @@
       "maybeYouWantTo":"Or maybe you would rather:",
       "restoreFilters":"Restore filters from previous search",
       "GoToFrontpage":"Go to the front page of DR-arkivet"
+   },
+   "calendar": {
+      "open":"Open calendar",
+      "close": "Close calendar",
+      "explanation": "Type a date in format DD-MM-YYYY or pick from the calendar.",
+      "select": "Select date"
    }
 }
\ No newline at end of file
diff --git a/src/utils/datepicker-utils.ts b/src/utils/datepicker-utils.ts
index 1483dc92..fc4ea43a 100644
--- a/src/utils/datepicker-utils.ts
+++ b/src/utils/datepicker-utils.ts
@@ -10,6 +10,8 @@ const updateDate = (
 	if (timer) {
 		clearTimeout(timer);
 	}
+	isDateValid.value = false;
+
 	const constructedDate =
 		inputVar.value.getDate() + '/' + Number(inputVar.value.getMonth() + 1) + '/' + inputVar.value.getFullYear();
 	const dateInput = constructedDate.replace(/[.-]/g, '/');
@@ -37,17 +39,9 @@ const updateDate = (
 				if (setDate >= minDate && setDate <= maxDate) {
 					updateLink();
 					isDateValid.value = true;
-				} else {
-					isDateValid.value = false;
 				}
-			} else {
-				isDateValid.value = false;
 			}
-		} else {
-			isDateValid.value = false;
 		}
-	} else {
-		isDateValid.value = false;
 	}
 };
 

From 68a119f24acc59c7207b95372bee3d3135966698 Mon Sep 17 00:00:00 2001
From: Jesper Lauridsen <jela@kb.dk>
Date: Wed, 10 Dec 2025 15:25:27 +0100
Subject: [PATCH 3/6] small visual improvements.

---
 src/components/common/TimePicker.vue | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/common/TimePicker.vue b/src/components/common/TimePicker.vue
index c77757ff..689ed9b4 100644
--- a/src/components/common/TimePicker.vue
+++ b/src/components/common/TimePicker.vue
@@ -94,17 +94,19 @@
 					<button
 						type="button"
 						aria-label="Previous month"
+						class="material-icons"
 						@click="prevMonth"
 					>
-						‹
+						keyboard_arrow_left
 					</button>
 					<h3 :id="calendarHeadingId">{{ monthTitle }}</h3>
 					<button
 						type="button"
 						aria-label="Next month"
+						class="material-icons"
 						@click="nextMonth"
 					>
-						›
+						keyboard_arrow_right
 					</button>
 				</div>
 			</div>
@@ -516,6 +518,7 @@ export default defineComponent({
 	text-align: center;
 	font-family: noway, sans-serif;
 	text-transform: capitalize;
+	font-size: 16px;
 }
 
 .input-wrap {
@@ -534,9 +537,14 @@ export default defineComponent({
 .dp-input {
 	padding: 8px 10px;
 	width: calc(266px - 40px);
-	height: 20px;
+	height: 22px;
 	font-family: noway, sans-serif;
+	font-size: 20px;
+	color: #0a2e70;
+	border-radius: 4px;
+	border: 1px solid #0a2e70;
 }
+
 .dp-toggle {
 	background: transparent;
 	border: 1px solid #ccc;
@@ -544,10 +552,13 @@ export default defineComponent({
 	border-radius: 4px;
 	height: 40px;
 	width: 40px;
+	cursor: pointer;
+	border: 1px solid #0a2e70;
 }
 
 .dp-selectors select {
 	width: calc(50% - 5px);
+	cursor: pointer;
 }
 
 .dp-calendar {
@@ -576,6 +587,13 @@ export default defineComponent({
 	justify-content: space-between;
 }
 
+.dp-calender-prev-next button {
+	border: 0px;
+	background-color: transparent;
+	font-size: 32px;
+	cursor: pointer;
+}
+
 .dp-calender-prev-next h3 {
 	text-transform: capitalize;
 }
@@ -616,11 +634,11 @@ export default defineComponent({
 	border-radius: 4px;
 }
 .dp-day:focus {
-	outline: 2px solid #007acc;
+	outline: 2px solid #0a2e70;
 }
 .dp-day[aria-selected='true'],
 .dp-day-selected {
-	background-color: #007acc;
+	background-color: #0a2e70;
 	color: white;
 	font-weight: bold;
 }

From dba5bdb38ed741a543501f7bcfd486873f901d8d Mon Sep 17 00:00:00 2001
From: Jesper Lauridsen <jela@kb.dk>
Date: Tue, 27 Jan 2026 08:50:11 +0100
Subject: [PATCH 4/6] small changes

---
 src/components/common/TimePicker.vue | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/common/TimePicker.vue b/src/components/common/TimePicker.vue
index 689ed9b4..5cda8ed1 100644
--- a/src/components/common/TimePicker.vue
+++ b/src/components/common/TimePicker.vue
@@ -94,7 +94,7 @@
 					<button
 						type="button"
 						aria-label="Previous month"
-						class="material-icons"
+						class="material-icons change-month left"
 						@click="prevMonth"
 					>
 						keyboard_arrow_left
@@ -103,7 +103,7 @@
 					<button
 						type="button"
 						aria-label="Next month"
-						class="material-icons"
+						class="material-icons change-month right"
 						@click="nextMonth"
 					>
 						keyboard_arrow_right
@@ -527,6 +527,10 @@ export default defineComponent({
 	align-items: center;
 }
 
+.dp-day:hover {
+	background-color: #caf0fe;
+}
+
 .dp-day-disabled {
 	color: #ccc;
 	opacity: 0.4;
@@ -554,6 +558,19 @@ export default defineComponent({
 	width: 40px;
 	cursor: pointer;
 	border: 1px solid #0a2e70;
+	transition: all 0.15s linear 0s;
+}
+
+.dp-toggle span {
+	transition: all 0.15s linear 0s;
+}
+
+.dp-toggle:hover span {
+	color: #ffffff;
+}
+
+.dp-toggle:hover {
+	background-color: #0a2e70;
 }
 
 .dp-selectors select {
@@ -632,6 +649,7 @@ export default defineComponent({
 	background: transparent;
 	cursor: pointer;
 	border-radius: 4px;
+	transition: all 0.15s linear 0s;
 }
 .dp-day:focus {
 	outline: 2px solid #0a2e70;

From 77cba71190b8ff6dc520f512aaa2f244ce90f179 Mon Sep 17 00:00:00 2001
From: Jesper Lauridsen <jela@kb.dk>
Date: Mon, 16 Mar 2026 14:05:56 +0100
Subject: [PATCH 5/6] more work to enhance the user experience

---
 src/components/common/TimePicker.vue          | 18 ++++++++++++------
 .../common/timeSearch/DayPicker.vue           | 19 ++++++++-----------
 .../common/timeSearch/TimeSearchInitValues.ts |  4 ++--
 src/locales/da.json                           |  4 +++-
 src/locales/en.json                           |  4 +++-
 src/utils/datepicker-utils.ts                 |  9 +++++++--
 6 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/src/components/common/TimePicker.vue b/src/components/common/TimePicker.vue
index 5cda8ed1..9048c8ab 100644
--- a/src/components/common/TimePicker.vue
+++ b/src/components/common/TimePicker.vue
@@ -5,10 +5,10 @@
 		@keydown.esc="close"
 	>
 		<label
+			class="datepicker-explanation"
 			:for="inputId"
-			class="visually-hidden"
 		>
-			{{ t('calendar.select') }}
+			{{ t('calendar.select') }}:
 		</label>
 
 		<div class="input-wrap">
@@ -26,7 +26,7 @@
 			/>
 			<Transition name="fade">
 				<div
-					v-if="invalid"
+					v-if="invalid && displayValue.length > 0"
 					class="error-container"
 				>
 					{{ t('datepicker.error', { start: formatErrorDate(startYear), end: formatErrorDate(endYear) }) }}
@@ -93,7 +93,7 @@
 				<div class="dp-calender-prev-next">
 					<button
 						type="button"
-						aria-label="Previous month"
+						:aria-label="t('calendar.prevMonth')"
 						class="material-icons change-month left"
 						@click="prevMonth"
 					>
@@ -102,7 +102,7 @@
 					<h3 :id="calendarHeadingId">{{ monthTitle }}</h3>
 					<button
 						type="button"
-						aria-label="Next month"
+						:aria-label="t('calendar.nextMonth')"
 						class="material-icons change-month right"
 						@click="nextMonth"
 					>
@@ -274,7 +274,7 @@ export default defineComponent({
 				invalid.value = isInvalid;
 
 				emit('update:modelValue', parsed);
-			}, 700);
+			}, 1000);
 		});
 
 		function onInputEnter() {
@@ -496,6 +496,12 @@ export default defineComponent({
 	color: rgb(10, 46, 112);
 }
 
+.datepicker-explanation {
+	text-align: start;
+	width: 100%;
+	margin-bottom: 5px;
+}
+
 .datepicker {
 	display: flex;
 	justify-content: center;
diff --git a/src/components/common/timeSearch/DayPicker.vue b/src/components/common/timeSearch/DayPicker.vue
index 992a85bc..a7d28783 100644
--- a/src/components/common/timeSearch/DayPicker.vue
+++ b/src/components/common/timeSearch/DayPicker.vue
@@ -1,7 +1,6 @@
 <template>
 	<div class="day-picker container">
 		<div class="picker-container">
-			<span class="date-span">{{ t('datepicker.date') }}:</span>
 			<TimePicker
 				v-model="selectedDate"
 				:start-date="startYear"
@@ -56,7 +55,7 @@ export default defineComponent({
 		let inputTimer: ReturnType<typeof setTimeout> | null = null;
 
 		const singleDatePicker = ref<DatePickerInstance>();
-		const selectedDate = ref<Date>(new Date(2015, 0, 1, 0, 0, 0));
+		const selectedDate = ref<Date | undefined>(undefined);
 		const singleDayStartDate = ref<Date>(new Date(2015, 0, 1, 0, 0, 0)); // January 1, 2015, 00:00:00
 		const singleDayEndDate = ref<Date>(new Date(2015, 0, 1, 23, 59, 59)); // January 1, 2015, 23:59:59
 
@@ -110,7 +109,7 @@ export default defineComponent({
 			}
 			inputTimer = setTimeout(() => {
 				updateDate(inputTimer, validDate, selectedDate, updateSeeMoreLink);
-			}, 750); // 750 milliseconds (0.75 second) delay
+			}, 1000); // 1000 milliseconds (1 second) delay
 		};
 
 		const specificDayLink = ref<RouteLocationRaw>({
@@ -124,7 +123,12 @@ export default defineComponent({
 		});
 
 		const moveToSearchPage = () => {
-			if (selectedDate.value !== null && startDate.value !== null && endDate.value !== null) {
+			if (
+				selectedDate.value !== null &&
+				startDate.value !== null &&
+				endDate.value !== null &&
+				selectedDate.value !== undefined
+			) {
 				startDate.value.setFullYear(selectedDate.value.getFullYear());
 				startDate.value.setMonth(selectedDate.value.getMonth());
 				startDate.value.setDate(selectedDate.value.getDate());
@@ -222,13 +226,6 @@ export default defineComponent({
 	justify-content: center;
 }
 
-.date-span {
-	padding-bottom: 10px;
-	width: 302px;
-	position: relative;
-	display: block;
-}
-
 .picker-container {
 	display: flex;
 	flex-direction: column;
diff --git a/src/components/common/timeSearch/TimeSearchInitValues.ts b/src/components/common/timeSearch/TimeSearchInitValues.ts
index 801b7405..59de99ac 100644
--- a/src/components/common/timeSearch/TimeSearchInitValues.ts
+++ b/src/components/common/timeSearch/TimeSearchInitValues.ts
@@ -6,8 +6,8 @@ const initStartDate = ref<Date>(new Date(2015, 0, 1, 0, 0, 0)); // January 1, 20
 const initEndDate = ref<Date>(new Date(2015, 11, 31, 23, 59, 59)); // December 31, 2015, 23:59:59
 
 const timeSliderValues = ref<number[]>(initSliderValues.value);
-const startDate = ref<Date | null>(initStartDate.value); // January 1, 2015, 00:00:00
-const endDate = ref<Date | null>(initEndDate.value); // December 31, 2015, 23:59:59
+const startDate = ref<Date>(initStartDate.value); // January 1, 2015, 00:00:00
+const endDate = ref<Date>(initEndDate.value); // December 31, 2015, 23:59:59
 
 /* these are just the preset values. Should be updated when we got the new index in solr */
 const startYear = ref<Date>(new Date(2006, 0, 1, 0, 0, 0));
diff --git a/src/locales/da.json b/src/locales/da.json
index 2c7adcd3..82771098 100644
--- a/src/locales/da.json
+++ b/src/locales/da.json
@@ -548,6 +548,8 @@
       "open":"Åben kalender",
       "close": "Luk kalender",
       "explanation": "Skriv en dato i formatet DD-MM-ÅÅÅÅ eller vælg fra kalenderen.",
-      "select": "Vælg dato"
+      "select": "Vælg dato",
+      "nextMonth": "Næste måned",
+      "prevMonth":"Forrige måned"
    }
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index d5e6c828..e997fa75 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -553,6 +553,8 @@
       "open":"Open calendar",
       "close": "Close calendar",
       "explanation": "Type a date in format DD-MM-YYYY or pick from the calendar.",
-      "select": "Select date"
+      "select": "Select date",
+      "nextMonth": "Next month",
+      "prevMonth":"Previous month"
    }
 }
\ No newline at end of file
diff --git a/src/utils/datepicker-utils.ts b/src/utils/datepicker-utils.ts
index fc4ea43a..0656ae7d 100644
--- a/src/utils/datepicker-utils.ts
+++ b/src/utils/datepicker-utils.ts
@@ -4,14 +4,19 @@ import { Ref } from 'vue';
 const updateDate = (
 	timer: ReturnType<typeof setTimeout> | null,
 	isDateValid: Ref<boolean>,
-	inputVar: Ref<Date>,
+	inputVar: Ref<Date | undefined>,
 	updateLink: () => void,
 ) => {
 	if (timer) {
 		clearTimeout(timer);
 	}
+	if (inputVar.value === undefined || inputVar.value === null) {
+		return;
+	}
 	isDateValid.value = false;
 
+	console.log(inputVar.value);
+
 	const constructedDate =
 		inputVar.value.getDate() + '/' + Number(inputVar.value.getMonth() + 1) + '/' + inputVar.value.getFullYear();
 	const dateInput = constructedDate.replace(/[.-]/g, '/');
@@ -49,7 +54,7 @@ const updateSelectedDate = (
 	e: Event,
 	timer: ReturnType<typeof setTimeout> | null,
 	isDateValid: Ref<boolean>,
-	inputVar: Ref<Date | null>,
+	inputVar: Ref<Date | undefined>,
 	updateLink: () => void,
 ) => {
 	if (timer) {

From f1c56244c7372fe34128d9681c83fcbd97300e86 Mon Sep 17 00:00:00 2001
From: Jesper Lauridsen <jela@kb.dk>
Date: Mon, 16 Mar 2026 14:07:00 +0100
Subject: [PATCH 6/6] remove console.log

---
 src/utils/datepicker-utils.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/utils/datepicker-utils.ts b/src/utils/datepicker-utils.ts
index 0656ae7d..4fd117f5 100644
--- a/src/utils/datepicker-utils.ts
+++ b/src/utils/datepicker-utils.ts
@@ -15,8 +15,6 @@ const updateDate = (
 	}
 	isDateValid.value = false;
 
-	console.log(inputVar.value);
-
 	const constructedDate =
 		inputVar.value.getDate() + '/' + Number(inputVar.value.getMonth() + 1) + '/' + inputVar.value.getFullYear();
 	const dateInput = constructedDate.replace(/[.-]/g, '/');