From 8db1b0f9acd79f53c493757aae5fb6e78b4cc3e7 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Mon, 11 Dec 2023 13:10:28 -0400
Subject: [PATCH] Create Input date

---
 src/components/common/VnInputDate.vue         |  76 ++++++++++++
 src/pages/Claim/Card/ClaimBasicData.vue       |  29 +----
 src/pages/Claim/ClaimFilter.vue               |  29 +----
 src/pages/Customer/CustomerPaymentsFilter.vue |  71 +----------
 src/pages/InvoiceOut/InvoiceOutFilter.vue     | 112 ++----------------
 src/pages/InvoiceOut/InvoiceOutGlobalForm.vue |  64 ++--------
 .../InvoiceOut/InvoiceOutNegativeBases.vue    |  98 +++++----------
 src/pages/Route/Cmr/CmrFilter.vue             |  33 +-----
 src/pages/Ticket/TicketFilter.vue             |  64 +---------
 src/pages/Travel/ExtraCommunityFilter.vue     |  63 ++--------
 10 files changed, 150 insertions(+), 489 deletions(-)
 create mode 100644 src/components/common/VnInputDate.vue

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
new file mode 100644
index 000000000..a8e0d4a43
--- /dev/null
+++ b/src/components/common/VnInputDate.vue
@@ -0,0 +1,76 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { toDate } from 'src/filters';
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: null,
+    },
+    readonly: {
+        type: Boolean,
+        default: false,
+    }
+});
+const emit = defineEmits(['update:modelValue']);
+const value = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value ? new Date(value).toISOString() : null);
+    },
+});
+
+const isPopupOpen = ref(false);
+
+const onDateUpdate = (date) => {
+    value.value = date;
+    isPopupOpen.value = false;
+};
+
+const padDate = (value) => value.toString().padStart(2, '0');
+const formatDate = (dateString) => {
+    const date = new Date(dateString || '');
+    return `${date.getFullYear()}/${padDate(date.getMonth() + 1)}/${padDate(
+        date.getDate()
+    )}`;
+};
+</script>
+
+<template>
+    <QInput
+        class="vn-input-date"
+        rounded
+        readonly
+        :model-value="toDate(value)"
+        v-bind="$attrs"
+    >
+        <template #append>
+            <QIcon name="event" class="cursor-pointer">
+                <QPopupProxy
+                    v-model="isPopupOpen"
+                    cover
+                    transition-show="scale"
+                    transition-hide="scale"
+                    :no-parent-event="props.readonly"
+                >
+                    <QDate
+                        :model-value="formatDate(value)"
+                        @update:model-value="onDateUpdate"
+                    />
+                </QPopupProxy>
+            </QIcon>
+        </template>
+    </QInput>
+</template>
+
+<style lang="scss">
+.vn-input-date.q-field--standard.q-field--readonly .q-field__control:before {
+    border-bottom-style: solid;
+}
+
+.vn-input-date.q-field--outlined.q-field--readonly .q-field__control:before {
+    border-style: solid;
+}
+</style>
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index bd46d1ad7..0f067f281 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -7,6 +7,7 @@ import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
+import VnInputDate from "components/common/VnInputDate.vue";
 
 const route = useRoute();
 const { t } = useI18n();
@@ -108,33 +109,7 @@ const statesFilter = {
                     />
                 </div>
                 <div class="col">
-                    <QInput
-                        v-model="data.created"
-                        mask="####-##-##"
-                        fill-mask="_"
-                        autofocus
-                    >
-                        <template #append>
-                            <QIcon name="event" class="cursor-pointer">
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="data.created" mask="YYYY-MM-DD">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                :label="t('globals.close')"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
+                    <VnInputDate v-model="data.created" :label="t('claim.basicData.created')" />
                 </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
index 8d1117f15..c9716074d 100644
--- a/src/pages/Claim/ClaimFilter.vue
+++ b/src/pages/Claim/ClaimFilter.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -150,33 +151,7 @@ const states = ref();
                     </QItem> -->
                     <QItem>
                         <QItemSection>
-                            <QInput
-                                v-model="params.created"
-                                :label="t('Created')"
-                                autofocus
-                                readonly
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.created">
-                                                <div class="row items-center justify-end">
-                                                    <QBtn
-                                                        v-close-popup
-                                                        :label="t('globals.close')"
-                                                        color="primary"
-                                                        flat
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                            <VnInputDate v-model="params.created" :label="t('Created')" />
                         </QItemSection>
                     </QItem>
                 </QExpansionItem>
diff --git a/src/pages/Customer/CustomerPaymentsFilter.vue b/src/pages/Customer/CustomerPaymentsFilter.vue
index 56fb52d79..7ee584d7f 100644
--- a/src/pages/Customer/CustomerPaymentsFilter.vue
+++ b/src/pages/Customer/CustomerPaymentsFilter.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -76,78 +77,16 @@ function isValidNumber(value) {
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInputDate
                             v-model="params.from"
                             :label="t('From')"
-                            mask="date"
-                            placeholder="yyyy/mm/dd"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.from" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        />
                     </QItemSection>
                     <QItemSection>
-                        <QInput
+                        <VnInputDate
                             v-model="params.to"
                             :label="t('To')"
-                            mask="date"
-                            placeholder="yyyy/mm/dd"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.to" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        />
                     </QItemSection>
                 </QItem>
             </QList>
diff --git a/src/pages/InvoiceOut/InvoiceOutFilter.vue b/src/pages/InvoiceOut/InvoiceOutFilter.vue
index 6711d17c6..5d965816f 100644
--- a/src/pages/InvoiceOut/InvoiceOutFilter.vue
+++ b/src/pages/InvoiceOut/InvoiceOutFilter.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -116,128 +117,35 @@ function setWorkers(data) {
                 <QExpansionItem :label="t('More options')" expand-separator>
                     <QItem>
                         <QItemSection>
-                            <QInput
+                            <VnInputDate
+                                v-model="params.issued"
                                 :label="t('Issued')"
                                 dense
-                                mask="date"
                                 outlined
                                 rounded
-                                v-model="params.issued"
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-hide="scale"
-                                            transition-show="scale"
-                                        >
-                                            <QDate v-model="params.issued" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        @click="save"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                            />
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput
+                            <VnInputDate
+                                v-model="params.created"
                                 :label="t('Created')"
                                 dense
-                                mask="date"
                                 outlined
                                 rounded
-                                v-model="params.created"
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-hide="scale"
-                                            transition-show="scale"
-                                        >
-                                            <QDate v-model="params.created" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        @click="save"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                            />
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput
+                            <VnInputDate
+                                v-model="params.dued"
                                 :label="t('Dued')"
                                 dense
-                                mask="date"
                                 outlined
                                 rounded
-                                v-model="params.dued"
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-hide="scale"
-                                            transition-show="scale"
-                                        >
-                                            <QDate v-model="params.dued" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        @click="save"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                            />
                         </QItemSection>
                     </QItem>
                 </QExpansionItem>
diff --git a/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue b/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
index 05c55bfe2..c15d56671 100644
--- a/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
+++ b/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
@@ -3,9 +3,9 @@ import { onMounted, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
 import { storeToRefs } from 'pinia';
-import { toDate } from 'src/filters';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import FetchData from 'components/FetchData.vue';
+import VnInputDate from "components/common/VnInputDate.vue";
 
 const { t } = useI18n();
 const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
@@ -111,64 +111,18 @@ onMounted(async () => {
                 outlined
                 rounded
             />
-            <QInput
-                dense
-                outlined
-                rounded
-                placeholder="dd-mm-aaa"
+            <VnInputDate
+                v-model="formData.invoiceDate"
                 :label="t('invoiceDate')"
-                :model-value="toDate(formData.invoiceDate)"
-            >
-                <template #append>
-                    <QIcon name="event" class="cursor-pointer">
-                        <QPopupProxy
-                            cover
-                            transition-show="scale"
-                            transition-hide="scale"
-                        >
-                            <QDate v-model="formData.invoiceDate">
-                                <div class="row items-center justify-end">
-                                    <QBtn
-                                        v-close-popup
-                                        :label="t('globals.close')"
-                                        color="primary"
-                                        flat
-                                    />
-                                </div>
-                            </QDate>
-                        </QPopupProxy>
-                    </QIcon>
-                </template>
-            </QInput>
-            <QInput
                 dense
                 outlined
-                rounded
-                placeholder="dd-mm-aaa"
+                rounded />
+            <VnInputDate
+                v-model="formData.maxShipped"
                 :label="t('maxShipped')"
-                :model-value="toDate(formData.maxShipped)"
-            >
-                <template #append>
-                    <QIcon name="event" class="cursor-pointer">
-                        <QPopupProxy
-                            cover
-                            transition-show="scale"
-                            transition-hide="scale"
-                        >
-                            <QDate v-model="formData.maxShipped">
-                                <div class="row items-center justify-end">
-                                    <QBtn
-                                        v-close-popup
-                                        :label="t('globals.close')"
-                                        color="primary"
-                                        flat
-                                    />
-                                </div>
-                            </QDate>
-                        </QPopupProxy>
-                    </QIcon>
-                </template>
-            </QInput>
+                dense
+                outlined
+                rounded />
             <VnSelectFilter
                 :label="t('company')"
                 v-model="formData.companyFk"
diff --git a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
index e0d2ddce8..63385380e 100644
--- a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
+++ b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
@@ -7,7 +7,7 @@ import invoiceOutService from 'src/services/invoiceOut.service';
 import { toCurrency } from 'src/filters';
 import { QCheckbox, QBtn } from 'quasar';
 import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
-import { toDate } from 'src/filters';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
 
@@ -15,8 +15,8 @@ const rows = ref([]);
 const { t } = useI18n();
 
 const dateRange = reactive({
-    from: Date.vnFirstDayOfMonth(),
-    to: Date.vnLastDayOfMonth(),
+    from: Date.vnFirstDayOfMonth().toISOString(),
+    to: Date.vnLastDayOfMonth().toISOString(),
 });
 
 const selectedCustomerId = ref(0);
@@ -174,7 +174,7 @@ const columns = ref([
 ]);
 
 const downloadCSV = async () => {
-    invoiceOutGlobalStore.getNegativeBasesCsv(dateRange.from, dateRange.to);
+    await invoiceOutGlobalStore.getNegativeBasesCsv(dateRange.from, dateRange.to);
 };
 
 const search = async () => {
@@ -186,20 +186,26 @@ const search = async () => {
             });
         }
     });
+    const searchFilter = {
+        limit: 20
+    }
+
+    if (and.length) {
+        searchFilter.where = {
+            and
+        }
+    }
 
     const params = {
         ...dateRange,
-        filter: {
-            limit: 20,
-            where: { and },
-        },
+        filter: JSON.stringify(searchFilter),
     };
     rows.value = await invoiceOutService.getNegativeBases(params);
 };
 
 const refresh = () => {
-    dateRange.from = Date.vnFirstDayOfMonth();
-    dateRange.to = Date.vnLastDayOfMonth();
+    dateRange.from = Date.vnFirstDayOfMonth().toISOString();
+    dateRange.to = Date.vnLastDayOfMonth().toISOString();
     filter.value = {
         company: null,
         country: null,
@@ -241,68 +247,24 @@ onMounted(async () => {
         >
             <template #top-left>
                 <div class="row justify-start items-end">
-                    <QInput
-                        dense
-                        lazy-rules
-                        outlined
-                        rounded
-                        placeholder="dd-mm-aaa"
+                    <VnInputDate
+                        v-model="dateRange.from"
                         :label="t('invoiceOut.negativeBases.from')"
-                        class="q-mr-md q"
-                        :model-value="toDate(dateRange.from)"
-                    >
-                        <template #append>
-                            <QIcon name="event" class="cursor-pointer">
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="dateRange.from">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                :label="t('globals.close')"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
-                    <QInput
+                        class="q-mr-md"
                         dense
                         lazy-rules
                         outlined
                         rounded
-                        placeholder="dd-mm-aaa"
+                    />
+                    <VnInputDate
+                        v-model="dateRange.to"
                         :label="t('invoiceOut.negativeBases.to')"
-                        class="q-mr-md q"
-                        :model-value="toDate(dateRange.to)"
-                    >
-                        <template #append>
-                            <QIcon name="event" class="cursor-pointer">
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
-                                >
-                                    <QDate v-model="dateRange.to">
-                                        <div class="row items-center justify-end">
-                                            <QBtn
-                                                v-close-popup
-                                                :label="t('globals.close')"
-                                                color="primary"
-                                                flat
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
+                        class="q-mr-md"
+                        dense
+                        lazy-rules
+                        outlined
+                        rounded
+                    />
                     <QBtn
                         color="primary"
                         icon-right="archive"
@@ -363,8 +325,8 @@ onMounted(async () => {
                                 props.col.name !== 'hasToInvoice' &&
                                 props.col.name !== 'verifiedData'
                             "
-                            >{{ props.value }}</template
-                        >
+                            >{{ props.value }}
+                        </template>
                         <CustomerDescriptorProxy
                             v-if="props.col.name === 'clientId'"
                             :id="selectedCustomerId"
diff --git a/src/pages/Route/Cmr/CmrFilter.vue b/src/pages/Route/Cmr/CmrFilter.vue
index b8948652a..bab300672 100644
--- a/src/pages/Route/Cmr/CmrFilter.vue
+++ b/src/pages/Route/Cmr/CmrFilter.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInputDate from "components/common/VnInputDate.vue";
 
 const { t } = useI18n();
 const props = defineProps({
@@ -111,35 +112,7 @@ const countries = ref();
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
-                            :label="t('route.cmr.list.shipped')"
-                            v-model="params.shipped"
-                            mask="date"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="rotate"
-                                        transition-hide="rotate"
-                                    >
-                                        <QDate v-model="params.shipped" minimal>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.close')"
-                                                    color="primary"
-                                                    flat
-                                                    @click="save"
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        <VnInputDate v-model="params.shipped" :label="t('route.cmr.list.shipped')" />
                     </QItemSection>
                 </QItem>
             </QList>
@@ -156,7 +129,7 @@ const countries = ref();
             country: Country
             clientFk: Client id
             shipped: Preparation date
-    
+
     es:
         params:
             cmrFk: Id cmr
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index aa98b9564..69f0b1c11 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import toDateString from 'filters/toDateString';
+import VnInputDate from "components/common/VnInputDate.vue";
 
 const { t } = useI18n();
 const props = defineProps({
@@ -71,69 +72,10 @@ const warehouses = ref();
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput v-model="params.from" :label="t('From')" mask="date">
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.from" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        <VnInputDate v-model="params.from" :label="t('From')" />
                     </QItemSection>
                     <QItemSection>
-                        <QInput v-model="params.to" :label="t('To')" mask="date">
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.to" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    @click="save"
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        <VnInputDate v-model="params.to" :label="t('To')" />
                     </QItemSection>
                 </QItem>
                 <QItem>
diff --git a/src/pages/Travel/ExtraCommunityFilter.vue b/src/pages/Travel/ExtraCommunityFilter.vue
index 26e3d42d2..2d3629de4 100644
--- a/src/pages/Travel/ExtraCommunityFilter.vue
+++ b/src/pages/Travel/ExtraCommunityFilter.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import FetchData from 'components/FetchData.vue';
-import { toDate } from 'src/filters';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -135,68 +135,24 @@ const decrement = (paramsObj, key) => {
                 </QItem>
                 <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QInput
+                        <VnInputDate
+                            v-model="params.shippedFrom"
+                            :label="t('params.shippedFrom')"
                             dense
                             outlined
                             rounded
-                            placeholder="dd-mm-aaa"
-                            :label="t('params.shippedFrom')"
-                            :model-value="toDate(params.shippedFrom)"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.shippedFrom">
-                                            <div class="row items-center justify-end">
-                                                <QBtn
-                                                    v-close-popup
-                                                    :label="t('globals.close')"
-                                                    color="primary"
-                                                    flat
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        />
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QInput
+                        <VnInputDate
+                            v-model="params.landedTo"
+                            :label="t('params.landedTo')"
                             dense
                             outlined
                             rounded
-                            placeholder="dd-mm-aaa"
-                            :model-value="toDate(params.landedTo)"
-                            :label="t('params.landedTo')"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="params.landedTo">
-                                            <div class="row items-center justify-end">
-                                                <QBtn
-                                                    v-close-popup
-                                                    :label="t('globals.close')"
-                                                    color="primary"
-                                                    flat
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
+                        />
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mb-sm">
@@ -272,6 +228,7 @@ const decrement = (paramsObj, key) => {
 .input-number >>> input[type='number'] {
     -moz-appearance: textfield;
 }
+
 .input-number >>> input::-webkit-outer-spin-button,
 .input-number >>> input::-webkit-inner-spin-button {
     appearance: none;