diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index 2fdf1af0..d74accca 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -2,8 +2,10 @@
 import useUserStore from 'src/stores/user';
 import { UserAttachmentDelete } from 'src/stores/user/types';
 import { dialog } from 'src/stores/utils';
-import { dateFormat } from 'src/utils/datetime';
+import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
+import { useI18n } from 'vue-i18n';
 
+const { locale } = useI18n();
 const userStore = useUserStore();
 
 const userId = defineModel<string>('userId');
@@ -83,6 +85,7 @@ function deleteFile(name: string) {
           v-model="registrationNo"
         />
         <VueDatePicker
+          id="input-startDate"
           utc
           autoApply
           :dark="$q.dark.isActive"
@@ -106,7 +109,20 @@ function deleteFile(name: string) {
               :dense="dense"
               outlined
               :readonly="readonly"
-              :model-value="startDate ? dateFormat(startDate) : ''"
+              placeholder="DD/MM/YYYY"
+              :mask="readonly ? '' : '##/##/####'"
+              :model-value="
+                startDate && readonly
+                  ? dateFormat(startDate)
+                  : dateFormat(startDate, false, false, true)
+              "
+              @update:model-value="
+                (v) => {
+                  if (v && v.toString().length === 10) {
+                    startDate = parseAndFormatDate(v, locale);
+                  }
+                }
+              "
             >
               <template v-slot:prepend>
                 <q-icon
@@ -153,7 +169,20 @@ function deleteFile(name: string) {
               :dense="dense"
               outlined
               :readonly="readonly"
-              :model-value="retireDate ? dateFormat(retireDate) : ''"
+              placeholder="DD/MM/YYYY"
+              :mask="readonly ? '' : '##/##/####'"
+              :model-value="
+                retireDate && readonly
+                  ? dateFormat(retireDate)
+                  : dateFormat(retireDate, false, false, true)
+              "
+              @update:model-value="
+                (v) => {
+                  if (v && v.toString().length === 10) {
+                    retireDate = parseAndFormatDate(v, locale);
+                  }
+                }
+              "
             >
               <template v-slot:prepend>
                 <q-icon
diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index 6457c2ca..c7864100 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -6,7 +6,9 @@ import {
   parseAndFormatDate,
   disabledAfterToday,
 } from 'src/utils/datetime';
+import { useI18n } from 'vue-i18n';
 
+const { locale } = useI18n();
 const optionStore = useOptionStore();
 
 const firstName = defineModel<string>('firstName');
@@ -143,14 +145,8 @@ defineProps<{
       </template>
       <template #trigger>
         <q-input
-          id="input-birth-date"
+          for="input-birth-date"
           hide-bottom-space
-          :mask="
-            birthDate?.toString() === 'Invalid Date' ||
-            birthDate?.toString() === undefined
-              ? '##/##/####'
-              : ''
-          "
           placeholder="DD/MM/YYYY"
           :label="$t('formDialogInputBirthDate')"
           :dense="dense"
@@ -160,15 +156,19 @@ defineProps<{
             (val: string) =>
               !!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
           ]"
-          :model-value="birthDate ? dateFormat(birthDate) : ''"
+          :mask="readonly ? '' : '##/##/####'"
+          :model-value="
+            birthDate && readonly
+              ? dateFormat(birthDate)
+              : dateFormat(birthDate, false, false, true)
+          "
           @update:model-value="
             (v) => {
               if (v && v.toString().length === 10) {
                 const today = new Date();
-                const date = parseAndFormatDate(v);
+                const date = parseAndFormatDate(v, locale);
                 birthDate = date && date > today ? today : date;
               }
-              if (v && v.toString().length === 0) birthDate = '';
             }
           "
         >
diff --git a/src/components/03_customer-management/AboutComponent.vue b/src/components/03_customer-management/AboutComponent.vue
index 14566ce2..801b97ec 100644
--- a/src/components/03_customer-management/AboutComponent.vue
+++ b/src/components/03_customer-management/AboutComponent.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { dateFormat } from 'src/utils/datetime';
+import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
+import { useI18n } from 'vue-i18n';
+
 defineProps<{
   title?: string;
   dense?: boolean;
@@ -8,7 +10,7 @@ defineProps<{
   separator?: boolean;
   typeCustomer?: string;
 }>();
-
+const { locale } = useI18n();
 const branchCode = defineModel<string>('branchCode');
 const legalEntityCode = defineModel<string>('legalEntityCode');
 const taxNo = defineModel<string | null | undefined>('taxNo');
@@ -139,11 +141,11 @@ const branchNo = defineModel<number>('branchNo');
         class="col-6"
         :label="$t('taxNo')"
         v-model="taxNo"
-          :rules="[
-        (val) =>
-          (val && val.length === 13 && /[0-9]+/.test(val)) ||
-          $t('formDialogInputTaxNoValidate'),
-      ]"
+        :rules="[
+          (val) =>
+            (val && val.length === 13 && /[0-9]+/.test(val)) ||
+            $t('formDialogInputTaxNoValidate'),
+        ]"
       />
       <q-input
         for="input-registerName"
@@ -196,7 +198,20 @@ const branchNo = defineModel<number>('branchNo');
             :dense="dense"
             outlined
             :readonly="readonly"
-            :model-value="registerDate ? dateFormat(registerDate) : ''"
+            placeholder="DD/MM/YYYY"
+            :mask="readonly ? '' : '##/##/####'"
+            :model-value="
+              registerDate && readonly
+                ? dateFormat(registerDate)
+                : dateFormat(registerDate, false, false, true)
+            "
+            @update:model-value="
+              (v) => {
+                if (v && v.toString().length === 10) {
+                  registerDate = parseAndFormatDate(v, locale);
+                }
+              }
+            "
           >
             <template v-slot:prepend>
               <q-icon
diff --git a/src/components/03_customer-management/FormBusiness.vue b/src/components/03_customer-management/FormBusiness.vue
index 9e91ac03..cb45f3d1 100644
--- a/src/components/03_customer-management/FormBusiness.vue
+++ b/src/components/03_customer-management/FormBusiness.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { dateFormat } from 'src/utils/datetime';
+import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
 import { onMounted } from 'vue';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-const { t, locale } = useI18n({ useScope: 'global' });
+const { locale } = useI18n({ useScope: 'global' });
 
 const employmentOffice = defineModel<string>('employmentOffice');
 const bussinessType = defineModel<string>('bussinessType');
@@ -14,7 +14,7 @@ const jobPositionEN = defineModel<string>('jobPositionEn');
 
 const jobDescription = defineModel<string>('jobDescription');
 
-const payDate = defineModel<Date>('payDate');
+const payDate = defineModel<Date | null>('payDate');
 const wageRate = defineModel<number>('wageRate');
 
 const saleEmployee = defineModel<string>('saleEmployee');
@@ -157,7 +157,20 @@ onMounted(async () => {
             :dense="dense"
             outlined
             :readonly="readonly"
-            :model-value="payDate ? dateFormat(payDate) : ''"
+            placeholder="DD/MM/YYYY"
+            :mask="readonly ? '' : '##/##/####'"
+            :model-value="
+              payDate && readonly
+                ? dateFormat(payDate)
+                : dateFormat(payDate, false, false, true)
+            "
+            @update:model-value="
+              (v) => {
+                if (v && v.toString().length === 10) {
+                  payDate = parseAndFormatDate(v, locale);
+                }
+              }
+            "
           >
             <template v-slot:prepend>
               <q-icon
diff --git a/src/components/03_customer-management/FormEmployeeHealthCheck.vue b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
index 51522f84..23cc461d 100644
--- a/src/components/03_customer-management/FormEmployeeHealthCheck.vue
+++ b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
-import { dateFormat } from 'src/utils/datetime';
+import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
 import useAddressStore, {
   District,
   Province,
   SubDistrict,
 } from 'src/stores/address';
 import { EmployeeCheckupCreate } from 'src/stores/employee/types';
+import { useI18n } from 'vue-i18n';
 
+const { locale } = useI18n();
 const adrressStore = useAddressStore();
 
 const addrOptions = reactive<{
@@ -261,10 +263,19 @@ onMounted(async () => {
                 :dense="dense"
                 outlined
                 :readonly="readonly"
+                placeholder="DD/MM/YYYY"
+                :mask="readonly ? '' : '##/##/####'"
                 :model-value="
-                  checkup.coverageStartDate
+                  checkup.coverageStartDate && readonly
                     ? dateFormat(checkup.coverageStartDate)
-                    : ''
+                    : dateFormat(checkup.coverageStartDate, false, false, true)
+                "
+                @update:model-value="
+                  (v) => {
+                    if (v && v.toString().length === 10) {
+                      checkup.coverageStartDate = parseAndFormatDate(v, locale);
+                    }
+                  }
                 "
               >
                 <template v-slot:prepend>
@@ -311,10 +322,22 @@ onMounted(async () => {
                 :dense="dense"
                 outlined
                 :readonly="readonly"
+                placeholder="DD/MM/YYYY"
+                :mask="readonly ? '' : '##/##/####'"
                 :model-value="
-                  checkup.coverageExpireDate
+                  checkup.coverageExpireDate && readonly
                     ? dateFormat(checkup.coverageExpireDate)
-                    : ''
+                    : dateFormat(checkup.coverageExpireDate, false, false, true)
+                "
+                @update:model-value="
+                  (v) => {
+                    if (v && v.toString().length === 10) {
+                      checkup.coverageExpireDate = parseAndFormatDate(
+                        v,
+                        locale,
+                      );
+                    }
+                  }
                 "
               >
                 <template v-slot:prepend>
diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index f9493dfc..4dbaef3e 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
-import { dateFormat } from 'src/utils/datetime';
+import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
+import { useI18n } from 'vue-i18n';
+
+const { locale } = useI18n();
 
 const passportType = defineModel<string>('passportType');
 const passportNumber = defineModel<string>('passportNumber');
@@ -73,7 +75,6 @@ defineProps<{
       class="col-6"
       :label="$t('formDialogInputPassportRef')"
       v-model="previousPassportReference"
-  
     />
     <q-input
       for="input-passport-place"
@@ -136,12 +137,25 @@ defineProps<{
           :dense="dense"
           outlined
           :readonly="readonly"
-          :model-value="passportIssueDate ? dateFormat(passportIssueDate) : ''"
           :rules="[
             (val: string) =>
               !!val ||
               $t('selectValidate') + $t('formDialogInputPassportIssuance'),
           ]"
+          placeholder="DD/MM/YYYY"
+          :mask="readonly ? '' : '##/##/####'"
+          :model-value="
+            passportIssueDate && readonly
+              ? dateFormat(passportIssueDate)
+              : dateFormat(passportIssueDate, false, false, true)
+          "
+          @update:model-value="
+            (v) => {
+              if (v && v.toString().length === 10) {
+                passportIssueDate = parseAndFormatDate(v, locale);
+              }
+            }
+          "
         >
           <template v-slot:prepend>
             <q-icon
@@ -180,14 +194,25 @@ defineProps<{
           :dense="dense"
           outlined
           :readonly="readonly"
-          :model-value="
-            passportExpiryDate ? dateFormat(passportExpiryDate) : ''
-          "
           :rules="[
             (val: string) =>
               !!val ||
               $t('selectValidate') + $t('formDialogInputPassportExpire'),
           ]"
+          placeholder="DD/MM/YYYY"
+          :mask="readonly ? '' : '##/##/####'"
+          :model-value="
+            passportExpiryDate && readonly
+              ? dateFormat(passportExpiryDate)
+              : dateFormat(passportExpiryDate, false, false, true)
+          "
+          @update:model-value="
+            (v) => {
+              if (v && v.toString().length === 10) {
+                passportExpiryDate = parseAndFormatDate(v, locale);
+              }
+            }
+          "
         >
           <template v-slot:prepend>
             <q-icon
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index 472f1f15..f9eaee57 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { onMounted, reactive } from 'vue';
-import { dateFormat } from 'src/utils/datetime';
+import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
 import useAddressStore, {
   District,
   Province,
   SubDistrict,
 } from 'src/stores/address';
+import { useI18n } from 'vue-i18n';
 
+const { locale } = useI18n();
 const adrressStore = useAddressStore();
 
 const addrOptions = reactive<{
@@ -115,7 +117,20 @@ onMounted(async () => {
           :dense="dense"
           outlined
           :readonly="readonly"
-          :model-value="visaIssueDate ? dateFormat(visaIssueDate) : ''"
+          placeholder="DD/MM/YYYY"
+          :mask="readonly ? '' : '##/##/####'"
+          :model-value="
+            visaIssueDate && readonly
+              ? dateFormat(visaIssueDate)
+              : dateFormat(visaIssueDate, false, false, true)
+          "
+          @update:model-value="
+            (v) => {
+              if (v && v.toString().length === 10) {
+                visaIssueDate = parseAndFormatDate(v, locale);
+              }
+            }
+          "
         >
           <!-- :rules="[
             (val: string) =>
@@ -167,7 +182,20 @@ onMounted(async () => {
           :dense="dense"
           outlined
           :readonly="readonly"
-          :model-value="visaExpiryDate ? dateFormat(visaExpiryDate) : ''"
+          placeholder="DD/MM/YYYY"
+          :mask="readonly ? '' : '##/##/####'"
+          :model-value="
+            visaExpiryDate && readonly
+              ? dateFormat(visaExpiryDate)
+              : dateFormat(visaExpiryDate, false, false, true)
+          "
+          @update:model-value="
+            (v) => {
+              if (v && v.toString().length === 10) {
+                visaExpiryDate = parseAndFormatDate(v, locale);
+              }
+            }
+          "
         >
           <!-- :rules="[
             (val: string) =>
@@ -233,7 +261,20 @@ onMounted(async () => {
           :dense="dense"
           outlined
           :readonly="readonly"
-          :model-value="visaStayUntilDate ? dateFormat(visaStayUntilDate) : ''"
+          placeholder="DD/MM/YYYY"
+          :mask="readonly ? '' : '##/##/####'"
+          :model-value="
+            visaStayUntilDate && readonly
+              ? dateFormat(visaStayUntilDate)
+              : dateFormat(visaStayUntilDate, false, false, true)
+          "
+          @update:model-value="
+            (v) => {
+              if (v && v.toString().length === 10) {
+                visaStayUntilDate = parseAndFormatDate(v, locale);
+              }
+            }
+          "
         >
           <!-- :rules="[
             (val: string) =>
@@ -299,7 +340,20 @@ onMounted(async () => {
           :dense="dense"
           outlined
           :readonly="readonly"
-          :model-value="entryDate ? dateFormat(entryDate) : ''"
+          placeholder="DD/MM/YYYY"
+          :mask="readonly ? '' : '##/##/####'"
+          :model-value="
+            entryDate && readonly
+              ? dateFormat(entryDate)
+              : dateFormat(entryDate, false, false, true)
+          "
+          @update:model-value="
+            (v) => {
+              if (v && v.toString().length === 10) {
+                entryDate = parseAndFormatDate(v, locale);
+              }
+            }
+          "
         >
           <!-- :rules="[
             (val: string) =>
diff --git a/src/components/03_customer-management/FormEmployeeWorkHistory.vue b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
index 6d1f6306..080f78e9 100644
--- a/src/components/03_customer-management/FormEmployeeWorkHistory.vue
+++ b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue';
-import { dateFormat } from 'src/utils/datetime';
+import { onMounted, ref } from 'vue';
+import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
 import { EmployeeWorkCreate } from 'src/stores/employee/types';
+import { useI18n } from 'vue-i18n';
+
+const { locale } = useI18n();
 
 const employeeWork = defineModel<EmployeeWorkCreate[]>('employeeWork');
 const positionNameOption =
@@ -208,8 +211,19 @@ onMounted(async () => {
                 :dense="dense"
                 outlined
                 :readonly="readonly"
+                placeholder="DD/MM/YYYY"
+                :mask="readonly ? '' : '##/##/####'"
                 :model-value="
-                  work.workEndDate ? dateFormat(work.workEndDate) : ''
+                  work.workEndDate && readonly
+                    ? dateFormat(work.workEndDate)
+                    : dateFormat(work.workEndDate, false, false, true)
+                "
+                @update:model-value="
+                  (v) => {
+                    if (v && v.toString().length === 10) {
+                      work.workEndDate = parseAndFormatDate(v, locale);
+                    }
+                  }
                 "
               >
                 <template v-slot:prepend>
@@ -267,10 +281,19 @@ onMounted(async () => {
                 :dense="dense"
                 outlined
                 :readonly="readonly"
+                placeholder="DD/MM/YYYY"
+                :mask="readonly ? '' : '##/##/####'"
                 :model-value="
-                  work.workPermitIssuDate
+                  work.workPermitIssuDate && readonly
                     ? dateFormat(work.workPermitIssuDate)
-                    : ''
+                    : dateFormat(work.workPermitIssuDate, false, false, true)
+                "
+                @update:model-value="
+                  (v) => {
+                    if (v && v.toString().length === 10) {
+                      work.workPermitIssuDate = parseAndFormatDate(v, locale);
+                    }
+                  }
                 "
               >
                 <template v-slot:prepend>
@@ -318,10 +341,19 @@ onMounted(async () => {
                 :dense="dense"
                 outlined
                 :readonly="readonly"
+                placeholder="DD/MM/YYYY"
+                :mask="readonly ? '' : '##/##/####'"
                 :model-value="
-                  work.workPermitExpireDate
+                  work.workPermitExpireDate && readonly
                     ? dateFormat(work.workPermitExpireDate)
-                    : ''
+                    : dateFormat(work.workPermitExpireDate, false, false, true)
+                "
+                @update:model-value="
+                  (v) => {
+                    if (v && v.toString().length === 10) {
+                      work.workPermitExpireDate = parseAndFormatDate(v, locale);
+                    }
+                  }
                 "
               >
                 <template v-slot:prepend>