ปรับปฏิทินทะเบียนประวัติ ส่วนการเพิ่มข้อมูลและแก้ไขวันเกิด

src/modules/04_registry/components/Information/Information.vue

@@ -91,7 +91,19 @@
           />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
+          <!-- change date input -->
+          <q-input
+            v-if="edit"
+            outlined
+            v-model="inputBirthDate"
+            label="วัน/เดือน/ปี เกิด"
+            mask="##/##/####"
+            dense
+            :error="dayChecked"
+            error-message="กรุณากรอกวัน/เดือน/ปี เกิด"
+          />
           <datepicker
+            v-else
             v-model="informaData.birthDate"
             :locale="'th'"
             autoApply
@@ -416,8 +428,9 @@
     </template>
   </HistoryTable>
 </template>
+
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 import { useQuasar } from "quasar";
@@ -468,6 +481,8 @@ const {
   dialogMessage,
   showLoader,
   hideLoader,
+  convertDate, // change date input
+  convertDateDisplay, // change date input
 } = mixin;
 
 const profileStore = useProfileDataStore();
@@ -730,7 +745,7 @@ const defaultAdd = () => {
       prefixId: null,
       firstname: null,
       lastname: null,
-      birthDate: new Date(),
+      birthDate: null,
       genderId: null,
       bloodId: null,
       nationality: null,
@@ -997,6 +1012,7 @@ const calRetire = async (birth: Date) => {
       .then((res: any) => {
         const data = res.data.result;
         informaData.value.age = data.age;
+        informaData.value.birthDate = birth;
         changeRetireText(data.retireDate);
         dateBefore.value = birth;
       })
@@ -1004,6 +1020,7 @@ const calRetire = async (birth: Date) => {
         messageError($q, e);
         const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
         informaData.value.birthDate = dateBefore.value;
+        inputBirthDate.value = dateBefore.value;
         changeRetireText(date2Thai(retire));
       })
       .finally(() => {
@@ -1029,6 +1046,7 @@ const fetchData = async () => {
         informaData.value.firstname = data.firstName;
         informaData.value.lastname = data.lastName;
         informaData.value.birthDate = new Date(data.birthDate);
+        inputBirthDate.value = convertDateDisplay(data.birthDate);
         informaData.value.genderId =
           data.genderId !== "00000000-0000-0000-0000-000000000000"
             ? data.genderId
@@ -1137,9 +1155,11 @@ const saveData = async () => {
     await myform.value.validate().then(async (success: boolean) => {
       if (success) {
         if (props.statusAdd) {
-          await addData();
+          if (inputBirthDate.value === "") dayChecked.value = true;
+          else await addData();
         } else {
-          await editData();
+          if (inputBirthDate.value === "") dayChecked.value = true;
+          else await editData();
         }
       } else {
       }
@@ -1165,4 +1185,25 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+
+// change date input
+const inputBirthDate = ref<string>("");
+const dayChecked = ref<boolean>(false);
+watch(
+  () => inputBirthDate.value,
+  (value: string) => {
+    if (value.length === 10) {
+      const dateVal = convertDate(value);
+
+      if (dateVal.isValid) {
+        dayChecked.value = false;
+        calRetire(new Date(dateVal.value));
+      } else {
+        dayChecked.value = true;
+        inputBirthDate.value = "";
+        informaData.value.age = "";
+      }
+    }
+  }
+);
 </script>