Update time format

src/components/common/VnInputTime.vue

@@ -1,8 +1,8 @@
 <script setup>
-import {computed, ref} from 'vue';
+import { computed, ref } from 'vue';
-import { toHour} from 'src/filters';
+import { toHour } from 'src/filters';
-import {useI18n} from "vue-i18n";
+import { useI18n } from 'vue-i18n';
-import isValidDate from "filters/isValidDate";
+import isValidDate from 'filters/isValidDate';
 
 const props = defineProps({
     modelValue: {
@@ -25,9 +25,14 @@ const value = computed({
         return props.modelValue;
     },
     set(value) {
-        const [hours, minutes] = value.split(':')
+        const [hours, minutes] = value.split(':');
-        const date = new Date()
+        const date = new Date();
-        date.setUTCHours(Number.parseInt(hours) || 0, Number.parseInt(minutes) || 0, 0, 0)
+        date.setUTCHours(
+            Number.parseInt(hours) || 0,
+            Number.parseInt(minutes) || 0,
+            0,
+            0
+        );
         emit('update:modelValue', value ? date.toISOString() : null);
     },
 });
@@ -40,14 +45,18 @@ const save = () => {
     value.value = internalValue.value;
 };
 const formatTime = (dateString) => {
-    if (!isValidDate(dateString)){
+    if (!isValidDate(dateString)) {
-        return ''
+        return '';
     }
+
     const date = new Date(dateString || '');
-    return `${date.getUTCHours().toString().padStart(2, '0')}:${date.getUTCMinutes().toString().padStart(2, '0')}`;
+    return date.toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit',
+    });
 };
 
-const internalValue = ref(formatTime(value))
+const internalValue = ref(formatTime(value));
 
 const styleAttrs = computed(() => {
     return props.isOutlined
@@ -82,8 +91,19 @@ const styleAttrs = computed(() => {
                         @update:model-value="onDateUpdate"
                     >
                         <div class="row items-center justify-end q-gutter-sm">
-                            <QBtn :label="t('Cancel')" color="primary" flat v-close-popup />
+                            <QBtn
-                            <QBtn label="Ok" color="primary" flat @click="save" v-close-popup />
+                                :label="t('Cancel')"
+                                color="primary"
+                                flat
+                                v-close-popup
+                            />
+                            <QBtn
+                                label="Ok"
+                                color="primary"
+                                flat
+                                @click="save"
+                                v-close-popup
+                            />
                         </div>
                     </QTime>
                 </QPopupProxy>

src/filters/toHour.js

@@ -4,13 +4,8 @@ export default function toHour(date) {
     if (!isValidDate(date)) {
         return '--:--';
     }
-    const dateHour = new Date(date);
+    return (new Date(date || '')).toLocaleTimeString([], {
-    let hours = dateHour.getUTCHours();
+        hour: '2-digit',
-    hours = hours % 12;
+        minute: '2-digit',
-    hours = hours ? hours : 12;
+    });
-
-    let minutes = dateHour.getUTCMinutes();
-    minutes = minutes < 10 ? minutes.toString().padStart(2, '0') : minutes;
-
-    return `${hours}:${minutes} ${dateHour.getUTCHours() >= 12 ? 'PM' : 'AM'}`;
 }