src/components/common/VnInputDate.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { onMounted, watch, computed, ref } from 'vue';
 import { date } from 'quasar';
 import { useI18n } from 'vue-i18n';
 
@@ -19,12 +19,18 @@ const $props = defineProps({
     },
 });
 
-const emit = defineEmits(['update:modelValue']);
 const { t } = useI18n();
 const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
 
+const dateFormat = 'DD/MM/YYYY';
 const isPopupOpen = ref(false);
 const hover = ref(false);
+const mask = ref();
+
+onMounted(() => {
+    // fix quasar bug
+    mask.value = '##/##/####';
+});
 
 const styleAttrs = computed(() => {
     return $props.isOutlined
@@ -36,7 +42,6 @@ const styleAttrs = computed(() => {
         : {};
 });
 
-const dateFormat = 'DD/MM/YYYY';
 const formattedDate = computed({
     get() {
         if (!model.value) return model.value;
@@ -50,7 +55,7 @@ const formattedDate = computed({
                 if (value.at(2) == '/') value = value.split('/').reverse().join('/');
                 value = date.formatDate(
                     new Date(value).toISOString(),
-                    'YYYY-MM-DDTHH:mm:ss.SSSZ',
+                    'YYYY-MM-DDTHH:mm:ss.SSSZ'
                 );
             }
             let ymd = value.split('-').map((e) => parseInt(e));
@@ -63,7 +68,7 @@ const formattedDate = computed({
                     orgDate.getHours(),
                     orgDate.getMinutes(),
                     orgDate.getSeconds(),
-                    orgDate.getMilliseconds(),
+                    orgDate.getMilliseconds()
                 );
             }
         }
@@ -72,7 +77,13 @@ const formattedDate = computed({
 });
 
 const popupDate = computed(() =>
-    model.value ? date.formatDate(new Date(model.value), 'YYYY/MM/DD') : model.value,
+    model.value ? date.formatDate(new Date(model.value), 'YYYY/MM/DD') : model.value
+);
+
+watch(
+    () => model.value,
+    (val) => (formattedDate.value = val),
+    { immediate: true }
 );
 </script>
 
@@ -81,7 +92,7 @@ const popupDate = computed(() =>
         <QInput
             v-model="formattedDate"
             class="vn-input-date"
-            mask="##/##/####"
+            :mask="mask"
             placeholder="dd/mm/aaaa"
             v-bind="{ ...$attrs, ...styleAttrs }"
             :class="{ required: $attrs.required }"

src/pages/Ticket/TicketFilter.vue

@@ -17,15 +17,6 @@ const props = defineProps({
     },
 });
 
-const from = Date.vnNew();
-const to = Date.vnNew();
-to.setDate(to.getDate() + 1);
-
-const defaultParams = {
-    from: toDateString(from),
-    to: toDateString(to),
-};
-
 const workers = ref();
 const provinces = ref();
 const states = ref();
@@ -44,11 +35,7 @@ const warehouses = ref();
         @on-fetch="(data) => (workers = data)"
         auto-load
     />
-    <VnFilterPanel
-        :data-key="props.dataKey"
-        :params="defaultParams"
-        :search-button="true"
-    >
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>

src/pages/Ticket/TicketList.vue

@@ -26,8 +26,8 @@ const to = Date.vnNew();
 to.setDate(to.getDate() + 1);
 
 const userParams = {
-    from: toDateString(from),
-    to: toDateString(to),
+    from: from.toISOString(),
+    to: to.toISOString(),
 };
 
 function navigate(id) {