@7365admin1/layer-common 4.2.2-staging.267 → 4.2.2-staging.268

package/components/Input/DateTimePicker.vue

@@ -1,42 +1,54 @@
 <template>
-  <div class="d-flex flex-column">
-    <v-text-field
-      v-bind="$attrs"
-      class="filter-field"
-      ref="dateTimePickerRef"
-      :model-value="dateTimeFormattedReadOnly"
-      autocomplete="off"
-      :placeholder="inputPlaceholder"
-      :rules="rules"
-      style="z-index: 10"
-      @click="openDatePicker"
-    >
-      <template #append-inner>
-        <v-icon icon="mdi-calendar" @click.stop="openDatePicker" />
-      </template>
-    </v-text-field>
-    <div class="w-100 d-flex align-end ga-3 hidden-input">
-      <input
-        ref="dateInput"
-        :type="inputType"
-        v-model="dateTime"
-        :min="minValue"
-      />
-    </div>
-  </div>
+  <v-text-field
+    v-bind="$attrs"
+    ref="dateTimePickerRef"
+    class="filter-field"
+    v-model="fieldValue"
+    :type="inputType"
+    :label="placeholder || undefined"
+    :min="minValue"
+    :rules="rules"
+    persistent-placeholder
+    autocomplete="off"
+  />
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { ref, computed } from "vue";
+
+/*
+ * The field the user edits IS the native date input now.
+ *
+ * It used to be two elements: a read-only Vuetify text field for show, and a
+ * zero-height `opacity: 0` native input behind it that `showPicker()` was
+ * called on. That arrangement broke every way a user can enter a date:
+ *
+ *  - TYPING went into Vuetify's own internal copy of the value (the text field
+ *    was bound with `:model-value` and nothing listened for the update), so the
+ *    typed date DISPLAYED and PASSED the required-rule while both models here
+ *    stayed empty - `startDate: ""` went to the API, and nothing could ever be
+ *    Upcoming.
+ *  - PICKING a date drove the invisible input. A partly-filled
+ *    `datetime-local` has an empty value until every segment is set, and the
+ *    segments were invisible, so the picker closed and set nothing.
+ *  - An End Date that was typed stayed invalid for the same reason as the
+ *    first point, so an announcement with a real end date could not be created
+ *    at all.
+ *
+ * One visible native input has the browser's own picker, its own typing, and a
+ * real `v-model`, which is all three fixes.
+ */
 
 const prop = defineProps({
   rules: {
     type: Array as PropType<Array<any>>,
     default: () => [],
   },
+  // Rendered as the field's label: a native date input always draws its own
+  // dd/mm/yyyy segments, so a placeholder would never be seen.
   placeholder: {
     type: String,
-    default: "DD/MM/YYYY, HH:MM AM/PM",
+    default: "",
   },
   dateOnly: {
     type: Boolean,
@@ -48,11 +60,10 @@ const prop = defineProps({
   },
 });
 
-const { formatDateISO8601 } = useUtils();
-const dateTime = defineModel<string | null>({ default: null }); //2025-10-10T13:09 format
-const dateTimeUTC = defineModel<string | null>("utc", { default: null }); // UTC format
+const dateTime = defineModel<string | null>({ default: null }); // 2025-10-10T13:09, local
+const dateTimeUTC = defineModel<string | null>("utc", { default: null }); // ISO 8601, UTC
 
-const dateTimeFormattedReadOnly = ref<string | null>(null);
+const dateTimePickerRef = ref<HTMLInputElement | null>(null);
 const inputType = computed(() => (prop.dateOnly ? "date" : "datetime-local"));
 
 const minValue = computed(() => {
@@ -62,148 +73,49 @@ const minValue = computed(() => {
   }
   return prop.min;
 });
-const inputPlaceholder = computed(
-  () =>
-    prop.placeholder ||
-    (prop.dateOnly ? "MM/DD/YYYY" : "DD/MM/YYYY, HH:MM AM/PM")
-);
-
-const dateInput = ref<HTMLInputElement | null>(null);
-const dateTimePickerRef = ref<HTMLInputElement | null>(null);
-let nativeInput: HTMLInputElement | null = null;
-
-const isInitialLoad = ref(true);
-
-function handleNativeInputClick(e: MouseEvent) {
-  e.stopPropagation();
-  openDatePicker();
-}
-
-function openDatePicker() {
-  setTimeout(() => {
-    dateInput.value?.showPicker?.();
-  }, 0);
-}
 
 function validate() {
   (dateTimePickerRef.value as any)?.validate();
 }
 
-function convertToReadableFormat(dateStr: string): string {
-  if (!dateStr) return "";
-
-  const date = new Date(dateStr);
-  if (Number.isNaN(date.getTime())) return "";
-
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  const year = date.getFullYear();
+const pad = (n: number) => String(n).padStart(2, "0");
 
-  if (prop.dateOnly) {
-    return `${day}/${month}/${year}`;
+// What the native input accepts: `YYYY-MM-DD` or `YYYY-MM-DDTHH:mm`, local time.
+function toInputValue(value: string | null): string {
+  if (!value) return "";
+  if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+    return prop.dateOnly ? value : `${value}T00:00`;
   }
-
-  let hours = date.getHours();
-  const minutes = String(date.getMinutes()).padStart(2, "0");
-
-  const ampm = hours >= 12 ? "PM" : "AM";
-  hours = hours % 12;
-  hours = hours ? hours : 12;
-
-  const formattedTime = `${String(hours).padStart(2, "0")}:${minutes} ${ampm}`;
-
-  return `${day}/${month}/${year}, ${formattedTime}`;
-}
-
-function toDateOnlyInputValue(dateStr: string): string {
-  if (!dateStr) return "";
-  if (/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) return dateStr;
-  const date = new Date(dateStr);
+  const date = new Date(value);
   if (Number.isNaN(date.getTime())) return "";
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
+  const day = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+  return prop.dateOnly
+    ? day
+    : `${day}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
 }
 
-function handleInitialDate() {
-  const dateDefault = dateTime.value;
-  const dateUTC = dateTimeUTC.value;
-  if (dateDefault) {
-    dateTimeFormattedReadOnly.value = convertToReadableFormat(dateDefault);
-    if (prop.dateOnly) {
-      dateTimeUTC.value = toDateOnlyInputValue(dateDefault);
-    } else {
-      const localDate = new Date(dateDefault);
-      dateTimeUTC.value = localDate.toISOString();
-    }
-  } else if (dateUTC) {
-    dateTimeFormattedReadOnly.value = convertToReadableFormat(dateUTC);
-    if (prop.dateOnly) {
-      dateTime.value = toDateOnlyInputValue(dateUTC);
-    } else {
-      const localDate = new Date(dateUTC);
-      dateTime.value = formatDateISO8601(localDate);
-    }
-  } else {
-    dateTimeFormattedReadOnly.value = null;
-  }
+// What the API stores: a date-only field stays `YYYY-MM-DD`, everything else
+// becomes UTC.
+function toUTCValue(value: string | null): string | null {
+  if (!value) return null;
+  if (prop.dateOnly) return toInputValue(value).slice(0, 10) || null;
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return null;
+  return date.toISOString();
 }
 
-watch(
-  dateTime,
-  (dateVal) => {
-    if (isInitialLoad.value) return; // ignore the first run
-    if (!dateVal) {
-      dateTimeFormattedReadOnly.value = null;
-      dateTimeUTC.value = null;
-      return;
-    }
-
-    dateTimeFormattedReadOnly.value = convertToReadableFormat(dateVal);
-    if (prop.dateOnly) {
-      dateTimeUTC.value = toDateOnlyInputValue(dateVal);
-    } else {
-      const localDate = new Date(dateVal);
-      dateTimeUTC.value = localDate.toISOString();
-    }
-  },
-  { immediate: false }
-);
-
-watch(
-  dateTimeUTC,
-  () => {
-    handleInitialDate();
+// The one value the field is bound to. A getter and a setter instead of a pair
+// of watchers: no initial-load flag, no chance of the two models fighting each
+// other, and it behaves the same on the server as in the browser.
+const fieldValue = computed({
+  get: () => toInputValue(dateTime.value || dateTimeUTC.value),
+  set: (value: string | null) => {
+    dateTime.value = value || null;
+    dateTimeUTC.value = toUTCValue(value);
   },
-  { immediate: true }
-);
-
-onMounted(async () => {
-  await nextTick();
-  isInitialLoad.value = false;
-  // Wait until Vuetify renders its internal input
-  nativeInput = (dateTimePickerRef.value as any)?.$el?.querySelector(
-    "input"
-  );
-  if (nativeInput) {
-    nativeInput.addEventListener("click", handleNativeInputClick);
-  }
-});
-
-onBeforeUnmount(() => {
-  nativeInput?.removeEventListener("click", handleNativeInputClick);
-  nativeInput = null;
 });
 
 defineExpose({
   validate,
 });
 </script>
-
-<style scoped>
-.hidden-input {
-  opacity: 0;
-  height: 0;
-}
-</style>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.2.2-staging.267",
+  "version": "4.2.2-staging.268",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",