ปรับ Filter ปีงบประมาณจาก

src/components/ToolBar.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import type { DataOption } from '@/interface/index/Main'
+// import type { DataOption } from '@/interface/index/Main'
 import Popup from '@/components/PopUp.vue'
 // import HeaderPopup from "@/components/HeaderPopup.vue";
 // import FormTime from "@/components/FormTime.vue";
 
-const filterYear = ref<number>(new Date().getFullYear() + 543)
-const yearOption = ref<DataOption[]>([{ id: '2566', name: '2566' }])
+const filterYear = ref<number>(new Date().getFullYear())
+// const yearOption = ref<DataOption[]>([{ id: '2566', name: '2566' }])
 const titleName = ref<string>('เพิ่มรายการลงเวลากรณีพิเศษ')
 
+function filterYearFn() {
+  console.log('test')
+}
+
 const modalPopup = ref<boolean>(false)
 function onClickopen() {
   modalPopup.value = true
@@ -20,7 +24,40 @@ function onClickClose() {
 <template>
   <div class="q-pb-sm row">
     <div class="items-center col-12 row q-gutter-sm">
-      <q-select
+      <datepicker
+        menu-class-name="modalfix"
+        v-model="filterYear"
+        class="col-2"
+        :locale="'th'"
+        autoApply
+        year-picker
+        :enableTimePicker="false"
+        @update:modelValue="filterYearFn"
+      >
+        <template #year="{ year }">{{ year + 543 }}</template>
+        <template #year-overlay-value="{ value }">{{
+          parseInt(value + 543)
+        }}</template>
+        <template #trigger>
+          <q-input
+            dense
+            lazy-rules
+            outlined
+            :model-value="filterYear + 543"
+            :label="`${'ปีงบประมาณ'}`"
+          >
+            <template v-slot:prepend>
+              <q-icon
+                name="event"
+                class="cursor-pointer"
+                style="color: var(--q-primary)"
+              >
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+      </datepicker>
+      <!-- <q-select
         dense
         outlined
         style="width: 180px"
@@ -29,7 +66,7 @@ function onClickClose() {
         :options="yearOption"
         option-label="name"
         option-value="id"
-      />
+      /> -->
       <q-space />
       <q-btn
         unelevated