From 98cf6651269370d8d943acf45ee35a126403442a Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Mon, 4 Mar 2024 22:22:23 -0300
Subject: [PATCH 1/2] Update input date/time behaviour

---
 src/components/common/VnInputDate.vue | 24 +++++++++++++++++++-----
 src/components/common/VnInputTime.vue | 14 +++++++++-----
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 8e0ef2890..30084c782 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { toDate } from 'src/filters';
+import VnInput from 'components/common/VnInput.vue';
 
 const props = defineProps({
     modelValue: {
@@ -17,12 +18,25 @@ const props = defineProps({
     },
 });
 const emit = defineEmits(['update:modelValue']);
+
+const joinDateAndTime = (date, time) => {
+    if (!date) {
+        return null;
+    }
+    if (!time) {
+        return new Date(date).toISOString();
+    }
+    const [year, month, day] = date.split('/');
+    return new Date(`${year}-${month}-${day}T${time}`).toISOString();
+};
+
+const time = computed(() => (props.modelValue ? props.modelValue.split('T')?.[1] : null));
 const value = computed({
     get() {
         return props.modelValue;
     },
     set(value) {
-        emit('update:modelValue', value ? new Date(value).toISOString() : null);
+        emit('update:modelValue', joinDateAndTime(value, time.value));
     },
 });
 
@@ -53,12 +67,12 @@ const styleAttrs = computed(() => {
 </script>
 
 <template>
-    <QInput
+    <VnInput
         class="vn-input-date"
-        rounded
-        readonly
         :model-value="toDate(value)"
         v-bind="{ ...$attrs, ...styleAttrs }"
+        readonly
+        @click="isPopupOpen = true"
     >
         <template #append>
             <QIcon name="event" class="cursor-pointer">
@@ -76,7 +90,7 @@ const styleAttrs = computed(() => {
                 </QPopupProxy>
             </QIcon>
         </template>
-    </QInput>
+    </VnInput>
 </template>
 
 <style lang="scss">
diff --git a/src/components/common/VnInputTime.vue b/src/components/common/VnInputTime.vue
index 597b2f9c7..1654f9b01 100644
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@@ -3,6 +3,7 @@ import { computed, ref } from 'vue';
 import { toHour } from 'src/filters';
 import { useI18n } from 'vue-i18n';
 import isValidDate from 'filters/isValidDate';
+import VnInput from "components/common/VnInput.vue";
 
 const props = defineProps({
     modelValue: {
@@ -26,8 +27,8 @@ const value = computed({
     },
     set(value) {
         const [hours, minutes] = value.split(':');
-        const date = new Date();
-        date.setUTCHours(
+        const date = new Date(props.modelValue);
+        date.setHours(
             Number.parseInt(hours) || 0,
             Number.parseInt(minutes) || 0,
             0,
@@ -37,8 +38,10 @@ const value = computed({
     },
 });
 
+const isPopupOpen = ref(false);
 const onDateUpdate = (date) => {
     internalValue.value = date;
+    isPopupOpen.value = false;
 };
 
 const save = () => {
@@ -70,16 +73,17 @@ const styleAttrs = computed(() => {
 </script>
 
 <template>
-    <QInput
+    <VnInput
         class="vn-input-time"
-        rounded
         readonly
         :model-value="toHour(value)"
         v-bind="{ ...$attrs, ...styleAttrs }"
+        @click="isPopupOpen = true"
     >
         <template #append>
             <QIcon name="event" class="cursor-pointer">
                 <QPopupProxy
+                    v-model="isPopupOpen"
                     cover
                     transition-show="scale"
                     transition-hide="scale"
@@ -109,7 +113,7 @@ const styleAttrs = computed(() => {
                 </QPopupProxy>
             </QIcon>
         </template>
-    </QInput>
+    </VnInput>
 </template>
 
 <style lang="scss">

From c34fc0f79e72aa24c5ef874a4f89e49c08796ce0 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Wed, 6 Mar 2024 22:45:23 -0300
Subject: [PATCH 2/2] Fix date time timezone

---
 src/components/common/VnInputDate.vue | 14 ++++++++++++--
 src/components/common/VnInputTime.vue |  6 ++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 30084c782..66da9b7bf 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue';
-import { toDate } from 'src/filters';
 import VnInput from 'components/common/VnInput.vue';
+import isValidDate from "filters/isValidDate";
 
 const props = defineProps({
     modelValue: {
@@ -54,6 +54,16 @@ const formatDate = (dateString) => {
         date.getDate()
     )}`;
 };
+const displayDate = (dateString) => {
+    if (!dateString || !isValidDate(dateString)) {
+        return '';
+    }
+    return new Date(dateString).toLocaleDateString([], {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+    });
+};
 
 const styleAttrs = computed(() => {
     return props.isOutlined
@@ -69,7 +79,7 @@ const styleAttrs = computed(() => {
 <template>
     <VnInput
         class="vn-input-date"
-        :model-value="toDate(value)"
+        :model-value="displayDate(value)"
         v-bind="{ ...$attrs, ...styleAttrs }"
         readonly
         @click="isPopupOpen = true"
diff --git a/src/components/common/VnInputTime.vue b/src/components/common/VnInputTime.vue
index 1654f9b01..aefee1a4d 100644
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { computed, ref } from 'vue';
-import { toHour } from 'src/filters';
 import { useI18n } from 'vue-i18n';
 import isValidDate from 'filters/isValidDate';
 import VnInput from "components/common/VnInput.vue";
@@ -41,14 +40,13 @@ const value = computed({
 const isPopupOpen = ref(false);
 const onDateUpdate = (date) => {
     internalValue.value = date;
-    isPopupOpen.value = false;
 };
 
 const save = () => {
     value.value = internalValue.value;
 };
 const formatTime = (dateString) => {
-    if (!isValidDate(dateString)) {
+    if (!dateString || !isValidDate(dateString)) {
         return '';
     }
 
@@ -76,7 +74,7 @@ const styleAttrs = computed(() => {
     <VnInput
         class="vn-input-time"
         readonly
-        :model-value="toHour(value)"
+        :model-value="formatTime(value)"
         v-bind="{ ...$attrs, ...styleAttrs }"
         @click="isPopupOpen = true"
     >