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';
+import isValidDate from "filters/isValidDate";
 
 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));
     },
 });
 
@@ -40,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
@@ -53,12 +77,12 @@ const styleAttrs = computed(() => {
 </script>
 
 <template>
-    <QInput
+    <VnInput
         class="vn-input-date"
-        rounded
-        readonly
-        :model-value="toDate(value)"
+        :model-value="displayDate(value)"
         v-bind="{ ...$attrs, ...styleAttrs }"
+        readonly
+        @click="isPopupOpen = true"
     >
         <template #append>
             <QIcon name="event" class="cursor-pointer">
@@ -76,7 +100,7 @@ const styleAttrs = computed(() => {
                 </QPopupProxy>
             </QIcon>
         </template>
-    </QInput>
+    </VnInput>
 </template>
 
 <style lang="scss">

src/components/common/VnInputTime.vue

@@ -1,8 +1,8 @@
 <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";
 
 const props = defineProps({
     modelValue: {
@@ -26,8 +26,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,6 +37,7 @@ const value = computed({
     },
 });
 
+const isPopupOpen = ref(false);
 const onDateUpdate = (date) => {
     internalValue.value = date;
 };
@@ -45,7 +46,7 @@ const save = () => {
     value.value = internalValue.value;
 };
 const formatTime = (dateString) => {
-    if (!isValidDate(dateString)) {
+    if (!dateString || !isValidDate(dateString)) {
         return '';
     }
 
@@ -70,16 +71,17 @@ const styleAttrs = computed(() => {
 </script>
 
 <template>
-    <QInput
+    <VnInput
         class="vn-input-time"
-        rounded
         readonly
-        :model-value="toHour(value)"
+        :model-value="formatTime(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 +111,7 @@ const styleAttrs = computed(() => {
                 </QPopupProxy>
             </QIcon>
         </template>
-    </QInput>
+    </VnInput>
 </template>
 
 <style lang="scss">