แก้ไข date picker error บน ios (เดือน/ปี)

src/components/ToolBar.vue

@@ -32,7 +32,8 @@ const filterYear = ref<number>(
 const titleName = ref<string>('เพิ่มรายการลงเวลากรณีพิเศษ') //หัว popup
 const dateMonth = ref<DataDateMonthObject>({
   month: new Date().getMonth(),
-  year: stores.year ? stores.year : new Date().getFullYear(),
+  year:
+    stores.year && !isNaN(stores.year) ? stores.year : new Date().getFullYear(),
 })
 const modalPopup = ref<boolean>(false) // modal เพิ่มรายการลงเวลากรณีพิเศษ
 
@@ -42,8 +43,16 @@ const modalPopup = ref<boolean>(false) // modal เพิ่มรายกา
  */
 function filterYearFn(type: string) {
   const year = type === 'year' ? filterYear.value : dateMonth.value.year
+  const month = dateMonth.value.month
+
+  // ตรวจสอบค่าก่อนส่ง
+  if (isNaN(Number(year)) || isNaN(Number(month))) {
+    console.warn('Invalid year or month value:', { year, month })
+    return
+  }
+
   //ส่งค่า ปีงบประมาณ กลับ
-  emit('update:year', year, dateMonth.value.month)
+  emit('update:year', Number(year), Number(month))
 }
 
 /**
@@ -66,8 +75,19 @@ function onClickClose() {
  * @returns  เดือนและปีในภาษาไทย
  */
 const monthYearThai = (val: DataDateMonthObject) => {
-  if (val == null) return ''
-  else return monthYear2Thai(val.month, val.year)
+  if (!val || !val.year || val.month === undefined || val.month === null) {
+    return ''
+  }
+
+  // ตรวจสอบว่าค่าเป็น number ที่ถูกต้อง
+  const year = Number(val.year)
+  const month = Number(val.month)
+
+  if (isNaN(year) || isNaN(month) || year < 1900 || month < 0 || month > 11) {
+    return ''
+  }
+
+  return monthYear2Thai(month, year)
 }
 
 /**
@@ -130,7 +150,7 @@ watch(
       month-picker
       :transitions="false"
       :enableTimePicker="false"
-      @update:modelValue="filterYearFn('mount')"
+      @update:modelValue="filterYearFn('month')"
     >
       <template #year="{ year }">{{
         Number.isFinite(year) ? year + 543 : ''
@@ -143,8 +163,8 @@ watch(
           dense
           lazy-rules
           outlined
-          :model-value="monthYearThai(dateMonth)"
-          :label="`${'ปีงบประมาณ'}`"
+          :model-value="monthYearThai(dateMonth) || 'เลือกเดือน/ปี'"
+          :label="`${'เดือน/ปีงบประมาณ'}`"
         >
           <template v-slot:prepend>
             <q-icon

src/stores/mixin.ts

@@ -315,7 +315,13 @@ export const useCounterMixin = defineStore('mixin', () => {
   }
 
   function monthYear2Thai(month: number, year: number, isFullMonth = false) {
-    const date = new Date(`${year}-${month + 1}-1`)
+    if (
+      month < 0 ||
+      month > 11 ||
+      !Number.isFinite(month) ||
+      !Number.isFinite(year)
+    )
+      return ''
     const fullMonthThai = [
       'มกราคม',
       'กุมภาพันธ์',
@@ -344,19 +350,12 @@ export const useCounterMixin = defineStore('mixin', () => {
       'พ.ย.',
       'ธ.ค.',
     ]
-    let dstYear = 0
-    if (date.getFullYear() > 2500) {
-      dstYear = date.getFullYear()
-    } else {
-      dstYear = date.getFullYear() + 543
-    }
-    let dstMonth = ''
-    if (isFullMonth) {
-      dstMonth = fullMonthThai[date.getMonth()]
-    } else {
-      dstMonth = abbrMonthThai[date.getMonth()]
-    }
-    return dstMonth + ' ' + dstYear
+
+    // assume year is in BE if > 2500
+    let dstYear = year > 2500 ? year : year + 543
+    // month is already 0-based
+    let dstMonth = isFullMonth ? fullMonthThai[month] : abbrMonthThai[month]
+    return `${dstMonth} ${dstYear}`
   }
 
   // กรณีมีเฉพาะ date

src/views/HistoryView.vue

@@ -219,3 +219,9 @@ onMounted(() => {
     </div>
   </div>
 </template>
+
+<style scoped>
+.q-tab-panel {
+  min-height: 400px;
+}
+</style>