diff --git a/src/components/common/TimePicker.vue b/src/components/common/TimePicker.vue
new file mode 100644
index 00000000..9048c8ab
--- /dev/null
+++ b/src/components/common/TimePicker.vue
@@ -0,0 +1,697 @@
+<template>
+	<div
+		ref="root"
+		class="datepicker"
+		@keydown.esc="close"
+	>
+		<label
+			class="datepicker-explanation"
+			:for="inputId"
+		>
+			{{ t('calendar.select') }}:
+		</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"
+				@blur="onInputEnter"
+			/>
+			<Transition name="fade">
+				<div
+					v-if="invalid && displayValue.length > 0"
+					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 ? t('calendar.close') : t('calendar.open')"
+				@click="toggle"
+			>
+				<span class="material-icons">event</span>
+			</button>
+		</div>
+
+		<p
+			:id="hintId"
+			class="visually-hidden"
+		>
+			{{ t('calendar.explanation') }}
+		</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="t('calendar.prevMonth')"
+						class="material-icons change-month left"
+						@click="prevMonth"
+					>
+						keyboard_arrow_left
+					</button>
+					<h3 :id="calendarHeadingId">{{ monthTitle }}</h3>
+					<button
+						type="button"
+						:aria-label="t('calendar.nextMonth')"
+						class="material-icons change-month right"
+						@click="nextMonth"
+					>
+						keyboard_arrow_right
+					</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"
+							: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 lang="ts">
+import { defineComponent, ref, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { CalendarDay } from '@/types/CalendarTypes';
+import { startYear, endYear } from './timeSearch/TimeSearchInitValues';
+
+export default defineComponent({
+	name: 'DatePicker',
+
+	props: {
+		modelValue: { type: Date, default: null },
+		startDate: { type: Date, default: null },
+		endDate: { type: Date, default: null },
+	},
+
+	emits: ['update:modelValue', 'check'],
+
+	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 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 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 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) =>
+				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 minDate = computed(() => (props.startDate ? new Date(props.startDate) : null));
+		const maxDate = computed(() => (props.endDate ? new Date(props.endDate) : null));
+
+		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();
+		});
+
+		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}`;
+		}
+
+		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;
+		}
+
+		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 = ref(formatDate(props.modelValue));
+
+		watch(displayValue, (val) => {
+			if (inputTimer.value) clearTimeout(inputTimer.value);
+
+			inputTimer.value = window.setTimeout(() => {
+				const normalized = val.replace(/[^0-9]/g, (m, i) => (i === 2 || i === 5 ? '-' : ''));
+				if (normalized !== val) displayValue.value = normalized;
+
+				const parsed = parseInputToDate(normalized);
+				let isInvalid = !parsed;
+
+				if (parsed) {
+					const year = parsed.getFullYear();
+					if (year < startYear.value.getFullYear() || year > endYear.value.getFullYear()) isInvalid = true;
+				}
+
+				invalid.value = isInvalid;
+
+				emit('update:modelValue', parsed);
+			}, 1000);
+		});
+
+		function onInputEnter() {
+			const parsed = parseInputToDate(displayValue.value);
+			if (!parsed) {
+				invalid.value = true;
+				return;
+			}
+			selectDay(parsed);
+			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();
+			});
+		}
+
+		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);
+		}
+
+		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 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 (!(minDate.value && 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 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 formatErrorDate(date: Date) {
+			if (!(date instanceof Date)) return '';
+			return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
+		}
+
+		function open() {
+			opened.value = true;
+			requestAnimationFrame(focusSelectedOrToday);
+		}
+		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>
+.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-explanation {
+	text-align: start;
+	width: 100%;
+	margin-bottom: 5px;
+}
+
+.datepicker {
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+	align-items: center;
+	font-family: noway, sans-serif;
+}
+
+.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;
+	font-family: noway, sans-serif;
+	text-transform: capitalize;
+	font-size: 16px;
+}
+
+.input-wrap {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+}
+
+.dp-day:hover {
+	background-color: #caf0fe;
+}
+
+.dp-day-disabled {
+	color: #ccc;
+	opacity: 0.4;
+	cursor: default;
+	pointer-events: none;
+}
+
+.dp-input {
+	padding: 8px 10px;
+	width: calc(266px - 40px);
+	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;
+	padding: 8px;
+	border-radius: 4px;
+	height: 40px;
+	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 {
+	width: calc(50% - 5px);
+	cursor: pointer;
+}
+
+.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-calender-prev-next button {
+	border: 0px;
+	background-color: transparent;
+	font-size: 32px;
+	cursor: pointer;
+}
+
+.dp-calender-prev-next h3 {
+	text-transform: capitalize;
+}
+
+.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;
+	transition: all 0.15s linear 0s;
+}
+.dp-day:focus {
+	outline: 2px solid #0a2e70;
+}
+.dp-day[aria-selected='true'],
+.dp-day-selected {
+	background-color: #0a2e70;
+	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..a7d28783 100644
--- a/src/components/common/timeSearch/DayPicker.vue
+++ b/src/components/common/timeSearch/DayPicker.vue
@@ -1,39 +1,11 @@
 <template>
 	<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 +24,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 +37,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 +49,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 | 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
 
@@ -126,26 +98,18 @@ 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);
-			}, 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',
+				updateDate(inputTimer, validDate, selectedDate, updateSeeMoreLink);
+			}, 1000); // 1000 milliseconds (1 second) delay
 		};
 
 		const specificDayLink = ref<RouteLocationRaw>({
@@ -159,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());
@@ -175,8 +144,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 +208,11 @@ export default defineComponent({
 			moveToSearchPage,
 			HandleMonthYear,
 			locale,
-			textInputOptions,
-			updateSelectedDate,
+			updateDate,
 			setupInputTimer,
 			inputTimer,
 			validDate,
 			executeUpdate,
-			formatDate,
 			t,
 		};
 	},
@@ -259,38 +226,6 @@ export default defineComponent({
 	justify-content: center;
 }
 
-.date-span {
-	width: 320px;
-	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 +312,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/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 806c3858..82771098 100644
--- a/src/locales/da.json
+++ b/src/locales/da.json
@@ -543,5 +543,13 @@
       "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",
+      "nextMonth": "Næste måned",
+      "prevMonth":"Forrige måned"
    }
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 448d9fbf..e997fa75 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -548,5 +548,13 @@
       "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",
+      "nextMonth": "Next month",
+      "prevMonth":"Previous month"
    }
 }
\ No newline at end of file
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..4fd117f5 100644
--- a/src/utils/datepicker-utils.ts
+++ b/src/utils/datepicker-utils.ts
@@ -1,11 +1,58 @@
 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 | undefined>,
+	updateLink: () => void,
+) => {
+	if (timer) {
+		clearTimeout(timer);
+	}
+	if (inputVar.value === undefined || inputVar.value === null) {
+		return;
+	}
+	isDateValid.value = false;
+
+	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;
+				}
+			}
+		}
+	}
+};
+
 const updateSelectedDate = (
 	e: Event,
 	timer: ReturnType<typeof setTimeout> | null,
 	isDateValid: Ref<boolean>,
-	inputVar: Ref<Date | null>,
+	inputVar: Ref<Date | undefined>,
 	updateLink: () => void,
 ) => {
 	if (timer) {
@@ -54,4 +101,4 @@ const updateSelectedDate = (
 	}
 };
 
-export { updateSelectedDate };
+export { updateSelectedDate, updateDate };