From 3fc6af0a852888a51a74d28a773ae431a12033da Mon Sep 17 00:00:00 2001
From: skytek_xinliang <carl@skytek.com.tw>
Date: Tue, 23 Jun 2026 10:10:44 +0800
Subject: [PATCH] fix: date select

---
 .../src/pages/self-assessment.vue             | 39 ++++++++++++++++---
 app/citizen-frontend/src/plugins/vuetify.ts   | 11 ++++++
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/app/citizen-frontend/src/pages/self-assessment.vue b/app/citizen-frontend/src/pages/self-assessment.vue
index 7ae2afb..288d013 100644
--- a/app/citizen-frontend/src/pages/self-assessment.vue
+++ b/app/citizen-frontend/src/pages/self-assessment.vue
@@ -75,14 +75,15 @@
               </v-col>
 
               <v-col cols="12" sm="6">
-                <v-text-field
-                  v-model="profileForm.birthday"
+                <v-date-input
+                  v-model="birthdayDate"
                   class="mb-3"
                   color="primary"
                   density="comfortable"
                   hide-details="auto"
                   label="生日"
-                  type="date"
+                  prepend-icon=""
+                  prepend-inner-icon="mdi-calendar"
                   variant="outlined"
                 />
               </v-col>
@@ -350,7 +351,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import Layout from '@/components/layout/DefaultLayout.vue'
 import { useAppStore } from '@/stores/app'
 
@@ -380,6 +381,34 @@ const resultLevel = ref(store.selfAssessment.scoreLevel)
 const improvementsOptions = ['肌力', '平衡', '心肺', '柔軟度', '敏捷', '體脂/BMI']
 const diseaseOptions = ['高血壓', '糖尿病', '高血脂', '心臟病', '關節退化', '骨質疏鬆']
 
+const birthdayDate = computed<Date | null>({
+  get: () => parseDateString(profileForm.birthday),
+  set: value => {
+    profileForm.birthday = formatDateString(value)
+  },
+})
+
+function parseDateString (value: string) {
+  const [year, month, day] = value.split('-').map(Number)
+  if (!year || !month || !day) {
+    return null
+  }
+
+  return new Date(year, month - 1, day)
+}
+
+function formatDateString (value: Date | null) {
+  if (!value) {
+    return ''
+  }
+
+  const year = value.getFullYear()
+  const month = String(value.getMonth() + 1).padStart(2, '0')
+  const day = String(value.getDate()).padStart(2, '0')
+
+  return `${year}-${month}-${day}`
+}
+
 function getImprovementIcon (imp: string) {
   switch (imp) {
     case '肌力': {
@@ -392,7 +421,7 @@ function getImprovementIcon (imp: string) {
       return 'mdi-heart-pulse'
     }
     case '柔軟度': {
-      return 'mdi-human-stretching'
+      return 'mdi-human-handsup'
     }
     case '敏捷': {
       return 'mdi-run-fast'
diff --git a/app/citizen-frontend/src/plugins/vuetify.ts b/app/citizen-frontend/src/plugins/vuetify.ts
index 38c5f78..ef67825 100644
--- a/app/citizen-frontend/src/plugins/vuetify.ts
+++ b/app/citizen-frontend/src/plugins/vuetify.ts
@@ -6,6 +6,7 @@
 
 // Composables
 import { createVuetify, type ThemeDefinition } from 'vuetify'
+import { zhHant } from 'vuetify/locale'
 // Styles
 import '@mdi/font/css/materialdesignicons.css'
 import 'vuetify/styles'
@@ -29,6 +30,16 @@ const HPTheme: ThemeDefinition = {
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
+  locale: {
+    locale: 'zhHant',
+    fallback: 'zhHant',
+    messages: { zhHant },
+  },
+  date: {
+    locale: {
+      zhHant: 'zh-TW',
+    },
+  },
   theme: {
     defaultTheme: 'HPTheme',
     themes: { HPTheme },