datepicker

src/modules/18_command/views/lists.vue

@@ -7,7 +7,7 @@ import TableList from "@/modules/18_command/components/Main/TableMain.vue";
 
 const store = useCommandListStore();
 
-const year = ref<number>(new Date().getFullYear());
+const yearly = ref<number>(new Date().getFullYear());
 const searchKeyword = ref<string>("");
 
 const tabsManu = ref([
@@ -55,14 +55,12 @@ onMounted(() => {
   <q-card>
     <q-toolbar class="q-pa-sm">
       <datepicker
-        class="q-mr-sm"
         menu-class-name="modalfix"
-        :model-value="year"
+        v-model="yearly"
         :locale="'th'"
         autoApply
         year-picker
         :enableTimePicker="false"
-        clearable
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -70,16 +68,24 @@ onMounted(() => {
         }}</template>
         <template #trigger>
           <q-input
-            hide-bottom-space
-            outlined
             dense
-            borderless
-            :model-value="year == null ? null : year + 543"
+            outlined
+            hide-bottom-space
+            :model-value="yearly == null ? null : yearly + 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-btn flat round dense icon="add" color="primary" />
 
       <q-space />