diff --git a/src/modules/03_recruiting/components/Career.vue b/src/modules/03_recruiting/components/Career.vue
index b36950613..acdf9b52f 100644
--- a/src/modules/03_recruiting/components/Career.vue
+++ b/src/modules/03_recruiting/components/Career.vue
@@ -1,20 +1,19 @@
 <script setup lang="ts">
-import type { QTableProps } from "quasar";
 import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import { useCounterMixin } from "@/stores/mixin";
+import { useExamDataStore } from "@/modules/03_recruiting/store";
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useExamDataStore } from "@/modules/03_recruiting/store";
-import type {
-  RequestItemsObject,
-  DataProps,
-} from "@/modules/03_recruiting/interface/request/Career";
-import type { ResponseObject } from "@/modules/03_recruiting/interface/response/Career";
+
+import type { QTableProps } from "quasar";
+import type { RequestItemsObject } from "@/modules/03_recruiting/interface/request/Career";
+
 import Table from "@/modules/03_recruiting/components/TableCan.vue";
 import DialogHeader from "@/modules/03_recruiting/components/DialogHeader.vue";
 import DialogFooter from "@/modules/03_recruiting/components/DialogFooter.vue";
-import { useRoute } from "vue-router";
 
 const props = defineProps({
   status: {
@@ -25,7 +24,14 @@ const props = defineProps({
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { date2Thai, modalDelete, modalConfirm, dateToISO, success,onSearchDataTable } = mixin;
+const {
+  date2Thai,
+  modalDelete,
+  modalConfirm,
+  dateToISO,
+  success,
+  onSearchDataTable,
+} = mixin;
 const store = useExamDataStore();
 const { examData, changeExamColumns } = store;
 const id = ref<string>("");
@@ -67,9 +73,6 @@ const visibleColumns = ref<String[]>([]);
 examData.career.columns.length == 0
   ? (visibleColumns.value = [
       "position",
-      //   "group",
-      //   "pile",
-      //   "org",
       "type",
       "startDate",
       "endDate",
@@ -135,22 +138,6 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-watch(visibleColumns, async (count: String[], prevCount: String[]) => {
-  await changeExamColumns("career", count);
-});
-
-watch(startDate, async (count: Date, prevCount: Date) => {
-  await calDate();
-});
-
-watch(endDate, async (count: Date, prevCount: Date) => {
-  await calDate();
-});
-
-onMounted(async () => {
-  await fetchData();
-});
-
 const calDate = async () => {
   let _startDate = new Date(startDate.value.toISOString().substr(0, 10));
   let _endDate = new Date(endDate.value.toISOString().substr(0, 10));
@@ -246,6 +233,8 @@ const calDateSplit = async (startDate: Date, endDate: Date) => {
 
 const fetchData = async () => {
   showLoader();
+  rows.value = [];
+  total.value = "-";
   await http
     .get(config.API.candidateCareer(candidateId.value))
     .then((res) => {
@@ -253,8 +242,6 @@ const fetchData = async () => {
       var yearDiff = 0;
       var monthDiff = 0;
       var dayDiff = 0;
-      total.value = "-";
-      rows.value = [];
       data.map((r: any) => {
         rows.value.push({
           ...r,
@@ -294,9 +281,7 @@ const fetchData = async () => {
     });
 };
 
-/**
- * กดดูข้อมูลก่อนหน้า
- */
+/** ฟังก์ชันกดดูข้อมูลก่อนหน้า*/
 const clickPrevious = async () => {
   rowIndex.value -= 1;
   const row = rows.value[rowIndex.value];
@@ -309,12 +294,10 @@ const clickPrevious = async () => {
   rangeDate.value = row.rangeDate;
   type.value = row.type;
   id.value = row.id;
-  await checkRowPage();
+  checkRowPage();
 };
 
-/**
- * กดดูข้อมูลต่อไป
- */
+/** ฟังก์ชันกดดูข้อมูลต่อไป*/
 const clickNext = () => {
   rowIndex.value += 1;
   const row = rows.value[rowIndex.value];
@@ -330,9 +313,7 @@ const clickNext = () => {
   checkRowPage();
 };
 
-/**
- * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
- */
+/** ฟังก์ชันเช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม*/
 const checkRowPage = () => {
   editRow.value = false;
   next.value = true;
@@ -345,21 +326,21 @@ const checkRowPage = () => {
   }
 };
 
-/**
- * กดปุ่มแก้ไขใน dialog
- */
+/** กดปุ่มแก้ไขใน dialog*/
 const clickEdit = () => {
   next.value = false;
   previous.value = false;
 };
 
-/**
- * กดปุ่มเพิ่มด้านบน table
- */
+/** กดปุ่มเพิ่มด้านบน table*/
 const clickAdd = () => {
   addRow();
 };
 
+/**
+ * กดลบข้อมูลใน table
+ * @param row ข้อมูลที่ต้องการลบ
+ */
 const checkDelete = (row: RequestItemsObject) => {
   rawItem.value = row;
   modalDelete(
@@ -370,31 +351,28 @@ const checkDelete = (row: RequestItemsObject) => {
   );
 };
 
-/**
- * ลบข้อมูลใน table
- */
+/** ลบข้อมูลใน table*/
 const clickDeleteRow = async () => {
   if (rawItem.value != null) {
     showLoader();
     await http
       .delete(config.API.candidateAdminCareer(rawItem.value.id))
-      .then(() => {
+      .then(async () => {
+        await fetchData();
         success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
       })
-      .finally(async () => {
-        await fetchData();
+      .finally(() => {
+        hideLoader();
       });
   } else {
     await fetchData();
   }
 };
 
-/**
- * กดบันทึกใน dialog
- */
+/** กดบันทึกใน dialog*/
 const clickSave = async () => {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
@@ -407,9 +385,7 @@ const clickSave = async () => {
   });
 };
 
-/**
- * บันทึกเพิ่มข้อมูล
- */
+/** ฟังก์ชันบันทึกเพิ่มข้อมูล*/
 const saveData = async () => {
   showLoader();
   await http
@@ -423,7 +399,8 @@ const saveData = async () => {
       rangeDate: rangeDate.value,
       type: type.value,
     })
-    .then(() => {
+    .then(async () => {
+      await fetchData();
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((e) => {
@@ -431,13 +408,11 @@ const saveData = async () => {
     })
     .finally(async () => {
       modal.value = false;
-      await fetchData();
+      hideLoader();
     });
 };
 
-/**
- * บันทึกแก้ไขข้อมูล
- */
+/** บันทึกแก้ไขข้อมูล*/
 const editData = async () => {
   showLoader();
   await http
@@ -451,7 +426,8 @@ const editData = async () => {
       rangeDate: rangeDate.value,
       type: type.value,
     })
-    .then(() => {
+    .then(async () => {
+      await fetchData();
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((e) => {
@@ -459,10 +435,10 @@ const editData = async () => {
     })
     .finally(async () => {
       modal.value = false;
-      await fetchData();
     });
 };
 
+/** กดปิด dialog และเช็คว่ามีการแก้ไขข้อมูลหรือไม่*/
 const checkClose = async () => {
   if (editRow.value == true) {
     modalConfirm(
@@ -477,9 +453,7 @@ const checkClose = async () => {
   await fetchData();
 };
 
-/**
- * กดปิด dialog
- */
+/** กดปิด dialog*/
 const clickClose = async () => {
   modal.value = false;
   editRow.value = false;
@@ -510,9 +484,7 @@ const selectData = (props: any) => {
   previous.value = false;
 };
 
-/**
- * กดปุ่มเพิ่มบน table
- */
+/** กดปุ่มเพิ่มบน table*/
 const addRow = () => {
   modalEdit.value = false;
   modal.value = true;
@@ -526,9 +498,7 @@ const addRow = () => {
   type.value = null;
 };
 
-/**
- * เช็คว่ามีการแก้ไขข้อมูล
- */
+/** เช็คว่ามีการแก้ไขข้อมูล*/
 const clickEditRow = () => {
   myForm.value.validate();
   editRow.value = true;
@@ -538,9 +508,7 @@ const clickEditRowPosition = () => {
   editRow.value = true;
 };
 
-/**
- * validate input ใน dialog
- */
+/** validate input ใน dialog*/
 const validateData = async () => {
   checkValidate.value = true;
   await myForm.value.validate().then((result: boolean) => {
@@ -561,6 +529,7 @@ const getClass = (val: boolean) => {
   };
 };
 
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -568,6 +537,26 @@ function onSearch() {
     columns.value ? columns.value : []
   );
 }
+
+/** watch ข้อมูลที่เปลี่ยนแปลงใน visibleColumns */
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeExamColumns("career", count);
+});
+
+/** watch ข้อมูลที่เปลี่ยนแปลงใน startDate และ endDate */
+watch(startDate, async (count: Date, prevCount: Date) => {
+  await calDate();
+});
+
+/** watch ข้อมูลที่เปลี่ยนแปลงใน endDate */
+watch(endDate, async (count: Date, prevCount: Date) => {
+  await calDate();
+});
+
+/** Hook ที่ทำงานเมื่อ component ถูก mount */
+onMounted(async () => {
+  await fetchData();
+});
 </script>
 
 <template>
@@ -829,8 +818,4 @@ function onSearch() {
   </q-dialog>
 </template>
 
-<style lang="scss">
-.modalfix {
-  position: fixed !important;
-}
-</style>
+<style lang="scss"></style>
diff --git a/src/modules/03_recruiting/components/Education.vue b/src/modules/03_recruiting/components/Education.vue
index 32f4ca84c..fe8553521 100644
--- a/src/modules/03_recruiting/components/Education.vue
+++ b/src/modules/03_recruiting/components/Education.vue
@@ -141,7 +141,7 @@ const getClass = (val: boolean) => {
             v-model="defaultEducation.educationLevelExamId"
             :rules="[(val:string) => !!val || `${'กรุณาเลือก วุฒิที่ใช้สมัครสอบ'}`]"
             :label="`${'วุฒิที่ใช้สมัครสอบ'}`"
-            @update:model-value="(value) => checkInputName()"
+            @update:model-value="() => checkInputName()"
           />
         </div>
         <div class="col-xs-12 col-sm-3" v-if="showEducationName">
@@ -233,7 +233,7 @@ const getClass = (val: boolean) => {
                 "
                 :model-value="date2Thai(defaultEducation.educationEndDate)"
                 :rules="[
-                  (val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`,
+                  (val:string) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`,
                 ]"
                 hide-bottom-space
                 :label="`${'วันที่สำเร็จการศึกษา'}`"
diff --git a/src/modules/03_recruiting/components/Information.vue b/src/modules/03_recruiting/components/Information.vue
index 42c8a2995..57a0a1dd0 100644
--- a/src/modules/03_recruiting/components/Information.vue
+++ b/src/modules/03_recruiting/components/Information.vue
@@ -213,8 +213,8 @@ onMounted(async () => {
           v-model="defaultInformation.cardid"
           maxlength="13"
           :rules="[
-            (val) => val.length == 13 || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
-            (val) =>
+            (val:string) => val.length == 13 || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+            (val:string) =>
               /^[0-9]*$/.test(val) ||
               `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
           ]"
@@ -383,8 +383,8 @@ onMounted(async () => {
           :borderless="!(status == 'checkRegister' || status == 'payment')"
           v-model="defaultInformation.tel"
           :rules="[
-            (val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
-            (val) =>
+            (val:string) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
+            (val:string) =>
               (val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
               'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง',
           ]"
diff --git a/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue b/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
index d26d00c2d..75fe25a8f 100644
--- a/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { QTableProps } from "quasar";
 import { onMounted, ref, watch, computed } from "vue";
 import { useQuasar, QForm } from "quasar";
 import { useRouter, useRoute } from "vue-router";
@@ -21,7 +20,6 @@ const route = useRoute();
 const {
   date2Thai,
   success,
-  dateToISO,
   messageError,
   showLoader,
   hideLoader,
@@ -137,13 +135,14 @@ async function uploadDocData() {
     showLoader();
     await http
       .put(config.API.periodRecruitDoc(id.value), formData)
-      .then((res) => {})
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
       .catch((e) => {
         messageError($q, e);
       })
       .finally(async () => {
         hideLoader();
-        success($q, "บันทึกข้อมูลสำเร็จ");
         clickBack();
       });
   } else {
@@ -162,7 +161,7 @@ async function uploadImgData() {
     showLoader();
     await http
       .put(config.API.periodRecruitImg(id.value), formData)
-      .then((res) => {})
+      .then(() => {})
       .catch((e) => {
         messageError($q, e);
       })
@@ -417,7 +416,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="yearly"
               :locale="'th'"
               autoApply
@@ -467,7 +465,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-4 col-md-3" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateExam"
               :locale="'th'"
               autoApply
@@ -503,7 +500,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateAnnouncement"
               :locale="'th'"
               autoApply
@@ -546,7 +542,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateRegister"
               :locale="'th'"
               autoApply
@@ -588,7 +583,6 @@ onMounted(async () => {
             v-if="announcementExam && isFeeNotZero"
           >
             <datepicker
-              menu-class-name="modalfix"
               v-model="datePayment"
               :locale="'th'"
               autoApply
@@ -628,7 +622,6 @@ onMounted(async () => {
 
           <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateAnnounce"
               :locale="'th'"
               autoApply
diff --git a/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
index 962c053b4..97de2e2f6 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
@@ -21,12 +21,10 @@ const route = useRoute();
 const {
   date2Thai,
   success,
-  dateToISO,
-  notifyError,
   messageError,
   showLoader,
   hideLoader,
-  convertDateToAPI
+  convertDateToAPI,
 } = mixin;
 const myForm = ref<QForm | null>(null); //form data input
 const name = ref<string>("");
@@ -141,13 +139,21 @@ function sendData() {
     name: name.value,
     note: note.value,
     paymentEndDate:
-      datePayment.value !== null ? convertDateToAPI(datePayment.value[1]) : null,
+      datePayment.value !== null
+        ? convertDateToAPI(datePayment.value[1])
+        : null,
     paymentStartDate:
-      datePayment.value !== null ? convertDateToAPI(datePayment.value[0]) : null,
+      datePayment.value !== null
+        ? convertDateToAPI(datePayment.value[0])
+        : null,
     registerEndDate:
-      dateRegister.value !== null ? convertDateToAPI(dateRegister.value[1]) : null,
+      dateRegister.value !== null
+        ? convertDateToAPI(dateRegister.value[1])
+        : null,
     registerStartDate:
-      dateRegister.value !== null ? convertDateToAPI(dateRegister.value[0]) : null,
+      dateRegister.value !== null
+        ? convertDateToAPI(dateRegister.value[0])
+        : null,
     round: round.value,
     year: yearly.value,
     announcementDate:
@@ -312,7 +318,7 @@ async function uploadDocData() {
     showLoader();
     await http
       .put(config.API.periodExamDoc(id.value), formData)
-      .then((res) => {})
+      .then(() => {})
       .catch((e) => {
         messageError($q, e);
       })
@@ -405,7 +411,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="yearly"
               :locale="'th'"
               autoApply
@@ -453,7 +458,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateExam"
               :locale="'th'"
               autoApply
@@ -489,7 +493,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateAnnouncement"
               :locale="'th'"
               autoApply
@@ -527,7 +530,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateRegister"
               :locale="'th'"
               autoApply
@@ -568,7 +570,6 @@ onMounted(async () => {
             v-if="announcementExam && fee != 0"
           >
             <datepicker
-              menu-class-name="modalfix"
               v-model="datePayment"
               :locale="'th'"
               autoApply
@@ -609,7 +610,6 @@ onMounted(async () => {
 
           <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateAnnounce"
               :locale="'th'"
               autoApply
diff --git a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
index 420ceae43..c2490bc33 100644
--- a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
@@ -1,7 +1,7 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { onMounted, ref, watch, computed } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useQuasar, QForm } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 
@@ -36,7 +36,7 @@ const route = useRoute();
 const {
   date2Thai,
   success,
-  dateToISO,
+  
   messageError,
   showLoader,
   hideLoader,
@@ -46,7 +46,6 @@ const {
 const checkRoutePermisson = ref<boolean>(
   route.name == "qualifyPeriodEditDetail"
 ); //เช็คชื่อ route
-const fileList = ref<any[]>([]);
 const myForm = ref<QForm | null>(null); //form data input
 const name = ref<string>("");
 const note = ref<string>("");
@@ -967,7 +966,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="yearly"
               :locale="'th'"
               :readonly="checkRoutePermisson"
@@ -995,7 +993,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateExam"
               :locale="'th'"
               autoApply
@@ -1035,7 +1032,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateAnnouncement"
               :locale="'th'"
               :readonly="checkRoutePermisson"
@@ -1075,7 +1071,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateRegister"
               :locale="'th'"
               autoApply
@@ -1120,7 +1115,6 @@ onMounted(async () => {
             v-if="announcementExam && fee != 0"
           >
             <datepicker
-              menu-class-name="modalfix"
               v-model="datePayment"
               :readonly="checkRoutePermisson"
               :locale="'th'"
@@ -1161,7 +1155,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateAnnounce"
               :locale="'th'"
               autoApply
diff --git a/src/modules/05_placement/components/AppointEmployee/AppointEmployeeDetail.vue b/src/modules/05_placement/components/AppointEmployee/AppointEmployeeDetail.vue
index 452d173d3..cb058e783 100644
--- a/src/modules/05_placement/components/AppointEmployee/AppointEmployeeDetail.vue
+++ b/src/modules/05_placement/components/AppointEmployee/AppointEmployeeDetail.vue
@@ -326,7 +326,6 @@ onMounted(async () => {
             <div class="col-xs-6 col-sm-6 row items-center">
               <div class="col-12">
                 <datepicker
-                  menu-class-name="modalfix"
                   :readonly="!edit"
                   v-model="date"
                   :locale="'th'"
diff --git a/src/modules/05_placement/components/AppointMent/AppointMentDetail.vue b/src/modules/05_placement/components/AppointMent/AppointMentDetail.vue
index f89bcba65..b5b55e00a 100644
--- a/src/modules/05_placement/components/AppointMent/AppointMentDetail.vue
+++ b/src/modules/05_placement/components/AppointMent/AppointMentDetail.vue
@@ -25,7 +25,7 @@ const {
   hideLoader,
   success,
   dialogConfirm,
-  convertDateToAPI
+  convertDateToAPI,
 } = useCounterMixin();
 
 const paramsId = route.params.id; //id รายการที่เลือก
@@ -316,7 +316,6 @@ onMounted(() => {
             <div class="col-xs-6 col-sm-6 row items-center">
               <div class="col-12">
                 <datepicker
-                  menu-class-name="modalfix"
                   :readonly="!edit"
                   v-model="date"
                   :locale="'th'"
diff --git a/src/modules/05_placement/components/Help-Government/HelpGovernmentDetail.vue b/src/modules/05_placement/components/Help-Government/HelpGovernmentDetail.vue
index a3b5a16c4..ce4a0284b 100644
--- a/src/modules/05_placement/components/Help-Government/HelpGovernmentDetail.vue
+++ b/src/modules/05_placement/components/Help-Government/HelpGovernmentDetail.vue
@@ -29,7 +29,7 @@ const {
   hideLoader,
   success,
   findOrgName,
-  convertDateToAPI
+  convertDateToAPI,
 } = mixin;
 
 const dataId = route.params.id as string;
@@ -250,7 +250,6 @@ onMounted(() => {
             <div class="col-xs-6 col-sm-4 row">
               <div class="col-12">
                 <datepicker
-                  menu-class-name="modalfix"
                   :readonly="!edit"
                   v-model="dateStart"
                   :locale="'th'"
@@ -296,7 +295,6 @@ onMounted(() => {
             <div class="col-xs-6 col-sm-4 row">
               <div class="col-12">
                 <datepicker
-                  menu-class-name="modalfix"
                   :readonly="!edit"
                   v-model="dateEnd"
                   :locale="'th'"
diff --git a/src/modules/05_placement/components/Other/OtherDetail.vue b/src/modules/05_placement/components/Other/OtherDetail.vue
index 84d141a11..e7719d754 100644
--- a/src/modules/05_placement/components/Other/OtherDetail.vue
+++ b/src/modules/05_placement/components/Other/OtherDetail.vue
@@ -326,7 +326,6 @@ onMounted(async () => {
             <div class="col-xs-6 col-sm-4 row items-center">
               <div class="col-12">
                 <datepicker
-                  menu-class-name="modalfix"
                   :readonly="!edit"
                   v-model="date"
                   :locale="'th'"
@@ -371,7 +370,6 @@ onMounted(async () => {
             <div class="col-xs-6 col-sm-4 row items-center">
               <div class="col-12">
                 <datepicker
-                  menu-class-name="modalfix"
                   :readonly="!edit"
                   v-model="militaryDate"
                   :locale="'th'"
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue b/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
index f2b171e81..a7c1fd2d6 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
@@ -758,8 +758,4 @@ onMounted(() => {
     </template>
   </HistoryTable>
 </template>
-<style lang="scss">
-.modalfix {
-  position: fixed !important;
-}
-</style>
+<style lang="scss"></style>
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Education.vue b/src/modules/05_placement/components/PersonalDetail/Information/Education.vue
index 4e76ab812..90c2f2912 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Education.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Education.vue
@@ -1211,10 +1211,6 @@ onMounted(async () => {
 </template>
 
 <style lang="scss">
-.modalfix {
-  position: fixed !important;
-}
-
 .no-border {
   border: none !important;
   box-shadow: none !important;
diff --git a/src/modules/05_placement/components/Receive/ReceiveAddPerson.vue b/src/modules/05_placement/components/Receive/ReceiveAddPerson.vue
index f228966a4..c305c14d1 100644
--- a/src/modules/05_placement/components/Receive/ReceiveAddPerson.vue
+++ b/src/modules/05_placement/components/Receive/ReceiveAddPerson.vue
@@ -496,7 +496,6 @@ onMounted(async () => {
                     week-start="0"
                     :max-date="calculateMaxDate()"
                     :enableTimePicker="false"
-                    menu-class-name="modalfix"
                     v-model="informaData.birthDate"
                     :locale="'th'"
                     @update:model-value="updateBirthDate"
diff --git a/src/modules/05_placement/components/Repatriate/RepatriateDetail.vue b/src/modules/05_placement/components/Repatriate/RepatriateDetail.vue
index 4321cfbff..c0c72194f 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriateDetail.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriateDetail.vue
@@ -321,7 +321,6 @@ onMounted(() => {
             <div class="col-xs-6 col-sm-4 row">
               <div class="col-12">
                 <datepicker
-                  menu-class-name="modalfix"
                   :readonly="!edit"
                   v-model="date"
                   :locale="'th'"
@@ -365,7 +364,6 @@ onMounted(() => {
             <div class="col-xs-6 col-sm-4 row">
               <div class="col-12">
                 <datepicker
-                  menu-class-name="modalfix"
                   :readonly="!edit"
                   v-model="dateRepatriation"
                   :locale="'th'"
diff --git a/src/modules/05_placement/components/Transfer/TransferDetail.vue b/src/modules/05_placement/components/Transfer/TransferDetail.vue
index bff124b57..b08598c73 100644
--- a/src/modules/05_placement/components/Transfer/TransferDetail.vue
+++ b/src/modules/05_placement/components/Transfer/TransferDetail.vue
@@ -617,7 +617,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-xs-6 col-sm-6">
                     <datepicker
-                      menu-class-name="modalfix"
                       :readonly="!edit"
                       v-model="date"
                       :locale="'th'"
diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index 2a4ade79f..1490768cd 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -89,9 +89,6 @@ const goal_desc = ref<string[]>(Array(activityCount.value).fill(""));
 const checkRule = ref<CheckboxItem[]>([]);
 const isCheckFile = ref<boolean>(false);
 
-const isDatePicker2Readonly = computed(() => {
-  return date_start.value === undefined;
-});
 const activityArray = computed(() => {
   return Array(activityCount.value).fill("");
 });
@@ -1292,7 +1289,6 @@ onMounted(async () => {
                     </div>
                     <div class="col-xs-12 col-sm-4">
                       <datepicker
-                        menu-class-name="modalfix"
                         v-model="date_start"
                         :locale="'th'"
                         autoApply
@@ -1332,7 +1328,6 @@ onMounted(async () => {
                     </div>
                     <div class="col-xs-12 col-sm-4">
                       <datepicker
-                        menu-class-name="modalfix"
                         v-model="date_finish"
                         :locale="'th'"
                         autoApply
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
index 9e3d35c81..98b1a8df5 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
@@ -1043,7 +1043,6 @@ onMounted(async () => {
 
             <div class="col-xs-12 col-sm-4">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="dateAutherise"
                 :locale="'th'"
                 autoApply
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
index f4d3f0f09..3be2a0a51 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
@@ -362,7 +362,6 @@ onMounted(async () => {
             <div class="col-12 text-top0 row items-center">
               <div class="col-6 q-px-sm">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="start_date"
                   :locale="'th'"
                   autoApply
@@ -402,7 +401,6 @@ onMounted(async () => {
 
               <div class="col-6 q-px-sm">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="date_finish"
                   :locale="'th'"
                   autoApply
@@ -1136,7 +1134,6 @@ onMounted(async () => {
                 />
                 <div class="col-xs-12 col-sm-4">
                   <datepicker
-                    menu-class-name="modalfix"
                     v-model="dateAutherise"
                     :locale="'th'"
                     autoApply
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
index ac3e0ef5f..eb0bb9ca4 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
@@ -1239,7 +1239,6 @@ onMounted(async () => {
               />
               <div class="col-xs-12 col-sm-4">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="dateAutherise"
                   :locale="'th'"
                   :readonly="!status"
@@ -1298,7 +1297,6 @@ onMounted(async () => {
               />
               <div class="col-xs-12 col-sm-4">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="director1_dated"
                   :locale="'th'"
                   autoApply
@@ -1359,7 +1357,6 @@ onMounted(async () => {
               />
               <div class="col-xs-12 col-sm-4">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="director2_dated"
                   :locale="'th'"
                   autoApply
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue
index 35fb6e4e5..774cd2cbf 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue
@@ -506,7 +506,6 @@ watch(lengthdiscipline_level, (newLength) => {
               <div class="col-12 text-top0 row items-center">
                 <div class="col-6 q-px-sm">
                   <datepicker
-                    menu-class-name="modalfix"
                     v-model="start_date"
                     :locale="'th'"
                     autoApply
@@ -545,7 +544,6 @@ watch(lengthdiscipline_level, (newLength) => {
                 </div>
                 <div class="col-6 q-px-sm">
                   <datepicker
-                    menu-class-name="modalfix"
                     v-model="date_finish"
                     :locale="'th'"
                     autoApply
@@ -1336,7 +1334,6 @@ watch(lengthdiscipline_level, (newLength) => {
 
                   <div class="col-xs-12 col-sm-4">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="dateAutherise"
                       :locale="'th'"
                       :readonly="!status"
@@ -1396,7 +1393,6 @@ watch(lengthdiscipline_level, (newLength) => {
                   />
                   <div class="col-xs-12 col-sm-4">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="director1_dated"
                       :locale="'th'"
                       autoApply
@@ -1456,7 +1452,6 @@ watch(lengthdiscipline_level, (newLength) => {
                   />
                   <div class="col-xs-12 col-sm-4">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="director2_dated"
                       :locale="'th'"
                       autoApply
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
index b2b8d206b..226074ed2 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
@@ -7,7 +7,6 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useProbationDataStore } from "@/modules/05_placement/storeProbation";
 
-
 import FormUploadFile from "@/modules/05_placement/components/probation/FormEvaluation/FormUploadFile.vue";
 import DialogSelectAuthority from "@/modules/05_placement/components/probation/FormEvaluation/DialogSelectAuthority.vue";
 
@@ -350,7 +349,6 @@ onMounted(async () => {
         <div class="col-12 row q-col-gutter-md">
           <div class="col-xs-12 col-sm-6">
             <datepicker
-              menu-class-name="modalfix"
               v-model="date_start"
               :locale="'th'"
               autoApply
@@ -401,7 +399,6 @@ onMounted(async () => {
 
           <div class="col-xs-12 col-sm-6">
             <datepicker
-              menu-class-name="modalfix"
               :readonly="
                 !status ||
                 checkRoutePermisson ||
@@ -602,7 +599,6 @@ onMounted(async () => {
             />
             <div class="col-xs-12 col-sm-4">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="chairman_dated"
                 :locale="'th'"
                 :readonly="
@@ -679,7 +675,6 @@ onMounted(async () => {
             />
             <div class="col-xs-12 col-sm-4">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="authority_dated"
                 :locale="'th'"
                 autoApply
@@ -742,7 +737,6 @@ onMounted(async () => {
             />
             <div class="col-xs-12 col-sm-4">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="director1_dated"
                 :locale="'th'"
                 autoApply
@@ -809,7 +803,6 @@ onMounted(async () => {
 
             <div class="col-xs-12 col-sm-4">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="director2_dated"
                 :locale="'th'"
                 autoApply
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
index c17c85523..67d3b260e 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -1219,7 +1219,6 @@ onMounted(async () => {
             />
             <div class="col-xs-12 col-sm-4">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="dateAutherise"
                 :locale="'th'"
                 autoApply
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
index 395a452f0..b2408b3b5 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
@@ -434,7 +434,6 @@ onMounted(async () => {
             <div class="col-12 text-top0 row items-center">
               <div class="col-6 q-px-sm">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="start_date"
                   :locale="'th'"
                   autoApply
@@ -474,7 +473,6 @@ onMounted(async () => {
 
               <div class="col-6 q-px-sm">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="date_finish"
                   :locale="'th'"
                   autoApply
@@ -1346,7 +1344,6 @@ onMounted(async () => {
                 />
                 <div class="col-xs-12 col-sm-4">
                   <datepicker
-                    menu-class-name="modalfix"
                     v-model="dateAutherise"
                     :locale="'th'"
                     autoApply
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue
index 3c05bb2f4..64fc29cf1 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue
@@ -26,7 +26,7 @@ const {
   messageError,
   dialogConfirm,
   dialogMessageNotify,
-  convertDateToAPI
+  convertDateToAPI,
 } = mixin;
 
 const assignId = ref<string>(route.params.form.toString());
@@ -441,7 +441,6 @@ onMounted(async () => {
             <div class="col-12 text-top0 row items-center">
               <div class="col-6 q-px-sm">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="start_date"
                   :locale="'th'"
                   autoApply
@@ -481,7 +480,6 @@ onMounted(async () => {
 
               <div class="col-6 q-px-sm">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="date_finish"
                   :locale="'th'"
                   autoApply
@@ -1350,7 +1348,6 @@ onMounted(async () => {
                 />
                 <div class="col-xs-12 col-sm-4">
                   <datepicker
-                    menu-class-name="modalfix"
                     v-model="dateAutherise"
                     :locale="'th'"
                     autoApply
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue
index 66255b5d1..b6ef33ace 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue
@@ -32,7 +32,7 @@ const {
   showLoader,
   hideLoader,
   dialogConfirm,
-  convertDateToAPI
+  convertDateToAPI,
 } = mixin;
 
 const assignId = ref<string>(route.params.form.toString());
@@ -1230,7 +1230,6 @@ onMounted(async () => {
             />
             <div class="col-xs-12 col-sm-4">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="dateAutherise"
                 :locale="'th'"
                 autoApply
diff --git a/src/modules/05_placement/components/probation/MainSurvey.vue b/src/modules/05_placement/components/probation/MainSurvey.vue
index 752a541eb..3649f8c90 100644
--- a/src/modules/05_placement/components/probation/MainSurvey.vue
+++ b/src/modules/05_placement/components/probation/MainSurvey.vue
@@ -160,7 +160,6 @@ onMounted(async () => {
         <div class="row q-col-gutter-sm">
           <div>
             <datepicker
-              menu-class-name="modalfix"
               v-model="year"
               style="width: 150px"
               :locale="'th'"
diff --git a/src/modules/05_placement/components/probation/SummaryScore.vue b/src/modules/05_placement/components/probation/SummaryScore.vue
index 8e00356e3..094657a92 100644
--- a/src/modules/05_placement/components/probation/SummaryScore.vue
+++ b/src/modules/05_placement/components/probation/SummaryScore.vue
@@ -454,7 +454,6 @@ onMounted(() => {
             </div>
             <div class="col-12">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="evaluate_date"
                 :locale="'th'"
                 autoApply
diff --git a/src/modules/05_placement/views/09_reportMain.vue b/src/modules/05_placement/views/09_reportMain.vue
index 5ccf31edf..1eb04a04c 100644
--- a/src/modules/05_placement/views/09_reportMain.vue
+++ b/src/modules/05_placement/views/09_reportMain.vue
@@ -394,7 +394,6 @@ onMounted(() => {
                       </div>
                       <div class="col-12">
                         <datepicker
-                          menu-class-name="modalfix"
                           v-model="dateStart"
                           :locale="'th'"
                           autoApply
@@ -430,7 +429,6 @@ onMounted(() => {
                       </div>
                       <div class="col-12">
                         <datepicker
-                          menu-class-name="modalfix"
                           v-model="dateEnd"
                           :locale="'th'"
                           autoApply
diff --git a/src/modules/13_salary/views/03_salaryRound.vue b/src/modules/13_salary/views/03_salaryRound.vue
index 1a6ecf35b..e2096039c 100644
--- a/src/modules/13_salary/views/03_salaryRound.vue
+++ b/src/modules/13_salary/views/03_salaryRound.vue
@@ -269,7 +269,6 @@ onMounted(async () => {
     <div class="row q-mb-sm q-col-gutter-sm">
       <div class="col-2">
         <datepicker
-          menu-class-name="modalfix"
           v-model="year"
           class="col-2"
           :locale="'th'"
diff --git a/src/modules/13_salary/views/05_salaryListsEmployee.vue b/src/modules/13_salary/views/05_salaryListsEmployee.vue
index 56e0713d7..92dcf8ed2 100644
--- a/src/modules/13_salary/views/05_salaryListsEmployee.vue
+++ b/src/modules/13_salary/views/05_salaryListsEmployee.vue
@@ -428,7 +428,6 @@ onMounted(async () => {
         </q-btn>
       </div>
       <datepicker
-        menu-class-name="modalfix"
         v-model="year"
         :locale="'th'"
         autoApply