diff --git a/src/components/DialogAddEmployee.vue b/src/components/DialogAddEmployee.vue
index ee4db44c5..c72424b69 100644
--- a/src/components/DialogAddEmployee.vue
+++ b/src/components/DialogAddEmployee.vue
@@ -1,10 +1,10 @@
 divdivdiv
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import { useQuasar } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
-
+import moment from "moment";
 import type { QForm } from "quasar";
 
 import Header from "@/components/DialogHeader.vue";
@@ -33,7 +33,7 @@ const informaData = ref<any>({
   prefixId: null,
   firstname: null,
   lastname: null,
-  birthDate: "",
+  birthDate: null,
   genderId: null,
   bloodId: null,
   nationality: "ไทย",
@@ -172,14 +172,15 @@ const calRetire = async (birth: Date) => {
   const body = {
     birthDate: dateToISO(birth),
   };
-  if (dateToISO(dateBefore.value) > dateToISO(birth)) {
-    // showLoader();
+  if (dateToISO(dateBefore.value) != dateToISO(birth)) {
+    console.log(birth);
+    showLoader();
     await http
       .post(config.API.profileCalRetire, body)
       .then((res: any) => {
         const data = res.data.result;
         informaData.value.age = data.age;
-        // informaData.value.birthDate = birth;
+        informaData.value.birthDate = birth;
         changeRetireText(data.retireDate);
         dateBefore.value = birth;
       })
@@ -189,7 +190,7 @@ const calRetire = async (birth: Date) => {
         informaData.value.age = "";
       })
       .finally(() => {
-        // hideLoader();
+        hideLoader();
       });
   }
 };
@@ -247,14 +248,13 @@ const addData = async () => {
     .post(config.API.createProfileOfficer(), formData)
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
-      clearForm();
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(async () => {
       modal.value = false;
-      await changeBirth(new Date(informaData.value.birthDate) ?? new Date());
+      await changeBirth(informaData.value.birthDate ?? new Date());
       hideLoader();
     });
 };
@@ -322,35 +322,42 @@ const fetchPerson = async () => {
     });
 };
 
-function clearForm() {
-  informaData.value.cardid = null;
-  informaData.value.age = null;
-  informaData.value.prefix = null;
-  informaData.value.prefixId = null;
-  informaData.value.firstname = null;
-  informaData.value.lastname = null;
-  informaData.value.birthDate = "";
-  informaData.value.genderId = null;
-  informaData.value.bloodId = null;
-  informaData.value.statusId = null;
-  informaData.value.tel = null;
-  informaData.value.employeeType = null;
-  informaData.value.employeeClass = null;
-  informaData.value.profileType = null;
-}
+const id = ref<string>("");
+const dayChecked = ref<boolean>(false);
+watch(
+  () => id.value,
+  () => {
+    if (id.value.length === 10) {
+      const test = ref<string[]>([]);
+      test.value = id.value.split("/");
+      const test3: number = parseInt(test.value[2]) - 543;
+      const test2: string = `${test3}-${test.value[1]}-${test.value[0]}`;
 
-function close() {
-  modal.value = false;
-  clearForm();
-}
+      const checked = moment(test2).isValid();
+
+      if (checked) {
+        dayChecked.value = false;
+        calRetire(new Date(test2));
+      } else {
+        dayChecked.value = true;
+        id.value = "";
+      }
+      // console.log(numDays);
+      // if (day <= numDays) {
+      //   console.log(test2);
+      // } else {
+      //   console.log("ผิดพลาด");
+      // }
+    }
+  }
+);
 </script>
-
 <template>
-  <q-dialog v-model="modal" persistent>
+  <q-dialog v-model="modal">
     <q-card style="min-width: 60vw">
       <Header
         tittle="เพิ่มข้อมูลทะเบียนประวัติข้าราชการ กทม.สามัญ"
-        :close="close"
+        :close="() => (modal = false)"
       />
       <q-separator />
 
@@ -427,23 +434,7 @@ function close() {
             </div>
             <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
               <div class="col-xs-6 col-sm-2 col-md-2">
-                <!-- เปลี่ยนเป็นเลือกปฏิทิน -->
-                <!-- <q-input
-                  v-model="informaData.birthDate"
-                  :rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
-                  :label="`${'วัน/เดือน/ปี เกิด'}`"
-                  type="date"
-                  hide-bottom-space
-                  outlined
-                  dense
-                  lazy-rules
-                  @update:model-value="
-                    (val:any) => {
-                      calRetire(new Date(val));
-                    }
-                  "
-                /> -->
-                <datepicker
+                <!-- <datepicker
                   v-model="informaData.birthDate"
                   :locale="'th'"
                   autoApply
@@ -458,8 +449,8 @@ function close() {
                   <template #year-overlay-value="{ value }">
                     {{ parseInt(value + 543) }}
                   </template>
-                  <template #trigger
-                    ><q-input
+                  <template #trigger>
+                    <q-input
                       for="#birthDate"
                       hide-bottom-space
                       outlined
@@ -483,7 +474,17 @@ function close() {
                       </template>
                     </q-input>
                   </template>
-                </datepicker>
+                </datepicker> -->
+                <q-input
+                  outlined
+                  v-model="id"
+                  label="วัน/เดือน/ปี"
+                  mask="##/##/####"
+                  dense
+                  hint="Mask: ##/##/####"
+                  :error="dayChecked"
+                  error-message="ทดสอบ"
+                />
               </div>
               <div class="col-xs-6 col-sm-2 col-md-2">
                 <q-input