fix: date select

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'