From 2dea65c4df874cca787a5c50d985d6851877ca76 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 23 Nov 2023 13:40:16 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20=20Filte?=
 =?UTF-8?q?r=20=E0=B8=9B=E0=B8=B5=E0=B8=87=E0=B8=9A=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B8=A1=E0=B8=B2=E0=B8=93=E0=B8=88=E0=B8=B2=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ToolBar.vue | 47 ++++++++++++++++++++++++++++++++++----
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/src/components/ToolBar.vue b/src/components/ToolBar.vue
index 94a68e0..ccd6ad3 100644
--- a/src/components/ToolBar.vue
+++ b/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