diff --git a/resources/js/Components/Common/DatePicker.vue b/resources/js/Components/Common/DatePicker.vue
index f5f0725b..a19636d3 100644
--- a/resources/js/Components/Common/DatePicker.vue
+++ b/resources/js/Components/Common/DatePicker.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import { getLocalizedDayJs } from '@/utils/time';
-import dayjs from 'dayjs';
 
 const model = defineModel<string | null>({
     default: null,
 });
 
+const tempDate = ref(getLocalizedDayJs(model.value).format('YYYY-MM-DD'));
+
 function updateDate(event: Event) {
     const target = event.target as HTMLInputElement;
     const newValue = target.value;
-    const newDate = dayjs(newValue);
+    const newDate = getLocalizedDayJs(newValue);
     if (newDate) {
-        console.log('old', model.value);
         model.value = getLocalizedDayJs(model.value)
             .set('year', newDate.year())
             .set('day', newDate.day())
@@ -22,25 +22,25 @@ function updateDate(event: Event) {
     }
 }
 
-const date = computed(() => {
-    return model.value
-        ? getLocalizedDayJs(model.value).format('YYYY-MM-DD')
-        : null;
-});
-
 const datePicker = ref<HTMLInputElement | null>(null);
+
+function updateTempValue(event: Event) {
+    const target = event.target as HTMLInputElement;
+    tempDate.value = target.value;
+}
 </script>
 
 <template>
     <div class="flex items-center justify-center text-muted">
         <input
             ref="datePicker"
-            @change="updateDate"
+            @change="updateTempValue"
+            @blur="updateDate"
             class="bg-input-background border text-white border-input-border rounded-md"
             type="date"
             id="start"
             name="trip-start"
-            :value="date" />
+            :value="tempDate" />
     </div>
 </template>