From 22f9b43c389eb824583d496da2258e91e305f816 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 10 Mar 2025 14:53:59 +0700
Subject: [PATCH] feat: add tooltip to date range selector in MainPage

---
 src/pages/15_dash-board/MainPage.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/pages/15_dash-board/MainPage.vue b/src/pages/15_dash-board/MainPage.vue
index 8688f49b..3e757a9e 100644
--- a/src/pages/15_dash-board/MainPage.vue
+++ b/src/pages/15_dash-board/MainPage.vue
@@ -97,7 +97,7 @@ watch(
         teleport
         auto-apply
         for="select-date-range"
-        class="col-md-4 col"
+        class="col-md-3 col"
         v-model="state.date"
         :dark="$q.dark.isActive"
         :locale="$i18n.locale === 'tha' ? 'th' : 'en'"
@@ -118,6 +118,13 @@ watch(
             <template #prepend>
               <q-icon name="mdi-calendar-outline" class="app-text-muted" />
             </template>
+            <q-tooltip>
+              {{
+                dateFormatJS({ date: state.date[0] }) +
+                '  -  ' +
+                dateFormatJS({ date: state.date[1] })
+              }}
+            </q-tooltip>
           </q-input>
         </template>
       </VueDatePicker>