Issue #1571 Refactor to a new date component <event-date-picker>

src/components/Event/EventDatePicker.vue

@@ -0,0 +1,46 @@
+<template>
+  <input
+    type="datetime-local"
+    class="rounded"
+    v-model="component"
+    :min="computeMin"
+    @blur="$emit('blur')"
+  />
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: Date;
+    min?: Date | undefined;
+  }>(),
+  {
+    min: undefined,
+  }
+);
+
+const emit = defineEmits(["update:modelValue", "blur"]);
+
+/** Format a Date to 'YYYY-MM-DDTHH:MM' based on local time zone */
+const UTCToLocal = (date: Date) => {
+  const localDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
+  return localDate.toISOString().slice(0, 16);
+};
+
+const component = computed({
+  get() {
+    return UTCToLocal(props.modelValue);
+  },
+  set(value) {
+    emit("update:modelValue", new Date(value));
+  },
+});
+
+const computeMin = computed((): string | undefined => {
+  if (!props.min) {
+    return undefined;
+  }
+  return UTCToLocal(props.min);
+});
+</script>

src/views/Event/EditView.vue

@@ -66,12 +66,10 @@
         class="items-center"
         label-for="begins-on-field"
       >
-        <input
+        <event-date-picker
-          type="datetime-local"
+          v-model="beginsOn"
-          class="rounded"
-          v-model="beginsOnComponentDateTime"
           @blur="consistencyBeginsOnBeforeEndsOn"
-        />
+        ></event-date-picker>
 
         <o-switch v-model="eventOptions.showStartTime">{{
           t("Show the time when the event begins")
@@ -84,13 +82,11 @@
         label-for="ends-on-field"
         class="items-center"
       >
-        <input
+        <event-date-picker
-          type="datetime-local"
+          v-model="endsOn"
-          class="rounded"
-          v-model="endsOnComponentDateTime"
-          :min="beginsOnComponentDateTime"
           @blur="consistencyBeginsOnBeforeEndsOn"
-        />
+          :min="beginsOn"
+        ></event-date-picker>
         <o-switch v-model="eventOptions.showEndTime">{{
           t("Show the time when the event ends")
         }}</o-switch>
@@ -654,6 +650,7 @@ import { useHead } from "@/utils/head";
 import { useOruga } from "@oruga-ui/oruga-next";
 import sortBy from "lodash/sortBy";
 import { escapeHtml } from "@/utils/html";
+import EventDatePicker from "@/components/Event/EventDatePicker.vue";
 
 const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
 
@@ -1205,34 +1202,6 @@ const isEventModified = computed((): boolean => {
 const beginsOn = ref(new Date());
 const endsOn = ref(new Date());
 
-const beginsOnComponentDateTime = computed({
-  get() {
-    // UTC to local
-    const localDate = new Date(
-      beginsOn.value.getTime() - beginsOn.value.getTimezoneOffset() * 60000
-    );
-    return localDate.toISOString().slice(0, 16); // Format to 'YYYY-MM-DDTHH:MM'
-  },
-  set(value) {
-    // Local timezone
-    beginsOn.value = new Date(value);
-  },
-});
-
-const endsOnComponentDateTime = computed({
-  get() {
-    // UTC to local
-    const localDate = new Date(
-      endsOn.value.getTime() - endsOn.value.getTimezoneOffset() * 60000
-    );
-    return localDate.toISOString().slice(0, 16); // Format to 'YYYY-MM-DDTHH:MM'
-  },
-  set(value) {
-    // Local timezone
-    endsOn.value = new Date(value);
-  },
-});
-
 const updateEventDateRelatedToTimezone = () => {
   // update event.value.beginsOn taking care of timezone
   const dateBeginsOn = new Date(beginsOn.value.getTime());