diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index 40af6ca0..32e4c373 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -87,13 +87,16 @@ function deleteFile(name: string) {
         autoApply
         v-model="startDate"
         :teleport="true"
-        :locale="'th'"
+        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
         :enableTimePicker="false"
         :disabled="readonly"
         class="col-6"
       >
         <template #year="{ value }">
-          {{ value + 543 }}
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #year-overlay-value="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
         </template>
         <template #trigger>
           <q-input
@@ -131,13 +134,16 @@ function deleteFile(name: string) {
         autoApply
         v-model="retireDate"
         :teleport="true"
-        :locale="'th'"
+        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
         :enableTimePicker="false"
         :disabled="readonly"
         class="col-6"
       >
         <template #year="{ value }">
-          {{ value + 543 }}
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #year-overlay-value="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
         </template>
         <template #trigger>
           <q-input
diff --git a/src/components/03_customer-management/FormBusiness.vue b/src/components/03_customer-management/FormBusiness.vue
index 8bac70b4..2d1ae5d4 100644
--- a/src/components/03_customer-management/FormBusiness.vue
+++ b/src/components/03_customer-management/FormBusiness.vue
@@ -139,13 +139,16 @@ defineProps<{
         utc
         autoApply
         v-model="payDate"
-        :locale="'th'"
+        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
         :enableTimePicker="false"
         :disabled="readonly"
         class="col-3"
       >
         <template #year="{ value }">
-          {{ value + 543 }}
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #year-overlay-value="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
         </template>
         <template #trigger>
           <q-input
diff --git a/src/components/03_customer-management/FormEmployeeHealthCheck.vue b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
index b44939ff..5b6fe1e8 100644
--- a/src/components/03_customer-management/FormEmployeeHealthCheck.vue
+++ b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
@@ -249,13 +249,16 @@ onMounted(async () => {
             autoApply
             :teleport="true"
             v-model="checkup.coverageStartDate"
-            :locale="'th'"
+            :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
             :enableTimePicker="false"
             :disabled="readonly"
             class="col-3"
           >
             <template #year="{ value }">
-              {{ value + 543 }}
+              {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ $i18n.locale === 'th-th' ? value + 543 : value }}
             </template>
             <template #trigger>
               <q-input
@@ -296,13 +299,16 @@ onMounted(async () => {
             autoApply
             :teleport="true"
             v-model="checkup.coverageExpireDate"
-            :locale="'th'"
+            :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
             :enableTimePicker="false"
             :disabled="readonly"
             class="col-3"
           >
             <template #year="{ value }">
-              {{ value + 543 }}
+              {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ $i18n.locale === 'th-th' ? value + 543 : value }}
             </template>
             <template #trigger>
               <q-input
diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index 33ed96ac..10b702b3 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -124,13 +124,16 @@ defineProps<{
       autoApply
       :teleport="true"
       v-model="passportIssueDate"
-      :locale="'th'"
+      :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
       :enableTimePicker="false"
       :disabled="readonly"
       class="col-3"
     >
       <template #year="{ value }">
-        {{ value + 543 }}
+        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+      </template>
+      <template #year-overlay-value="{ value }">
+        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
       </template>
       <template #trigger>
         <q-input
@@ -165,13 +168,16 @@ defineProps<{
       autoApply
       :teleport="true"
       v-model="passportExpiryDate"
-      :locale="'th'"
+      :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
       :enableTimePicker="false"
       :disabled="readonly"
       class="col-3"
     >
       <template #year="{ value }">
-        {{ value + 543 }}
+        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+      </template>
+      <template #year-overlay-value="{ value }">
+        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
       </template>
       <template #trigger>
         <q-input
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index 24c771a1..fe84efdf 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -97,13 +97,16 @@ onMounted(async () => {
       autoApply
       :teleport="true"
       v-model="visaIssueDate"
-      :locale="'th'"
+      :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
       :enableTimePicker="false"
       :disabled="readonly"
       class="col-3"
     >
       <template #year="{ value }">
-        {{ value + 543 }}
+        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+      </template>
+      <template #year-overlay-value="{ value }">
+        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
       </template>
       <template #trigger>
         <q-input
@@ -146,13 +149,16 @@ onMounted(async () => {
       autoApply
       :teleport="true"
       v-model="visaExpiryDate"
-      :locale="'th'"
+      :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
       :enableTimePicker="false"
       :disabled="readonly"
       class="col-3"
     >
       <template #year="{ value }">
-        {{ value + 543 }}
+        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+      </template>
+      <template #year-overlay-value="{ value }">
+        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
       </template>
       <template #trigger>
         <q-input
@@ -210,13 +216,16 @@ onMounted(async () => {
       autoApply
       :teleport="true"
       v-model="visaStayUntilDate"
-      :locale="'th'"
+      :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
       :enableTimePicker="false"
       :disabled="readonly"
       class="col-6"
     >
       <template #year="{ value }">
-        {{ value + 543 }}
+        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+      </template>
+      <template #year-overlay-value="{ value }">
+        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
       </template>
       <template #trigger>
         <q-input
@@ -275,13 +284,16 @@ onMounted(async () => {
       autoApply
       :teleport="true"
       v-model="entryDate"
-      :locale="'th'"
+      :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
       :enableTimePicker="false"
       :disabled="readonly"
       class="col-6"
     >
       <template #year="{ value }">
-        {{ value + 543 }}
+        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+      </template>
+      <template #year-overlay-value="{ value }">
+        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
       </template>
       <template #trigger>
         <q-input
diff --git a/src/components/03_customer-management/FormEmployeeWorkHistory.vue b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
index 254724e7..2b138eab 100644
--- a/src/components/03_customer-management/FormEmployeeWorkHistory.vue
+++ b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
@@ -194,13 +194,16 @@ onMounted(async () => {
             autoApply
             :teleport="true"
             v-model="work.workEndDate"
-            :locale="'th'"
+            :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
             :enableTimePicker="false"
             :disabled="readonly"
             class="col-6"
           >
             <template #year="{ value }">
-              {{ value + 543 }}
+              {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ $i18n.locale === 'th-th' ? value + 543 : value }}
             </template>
             <template #trigger>
               <q-input
@@ -251,13 +254,16 @@ onMounted(async () => {
             autoApply
             :teleport="true"
             v-model="work.workPermitIssuDate"
-            :locale="'th'"
+            :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
             :enableTimePicker="false"
             :disabled="readonly"
             class="col-6"
           >
             <template #year="{ value }">
-              {{ value + 543 }}
+              {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ $i18n.locale === 'th-th' ? value + 543 : value }}
             </template>
             <template #trigger>
               <q-input
@@ -299,13 +305,16 @@ onMounted(async () => {
             autoApply
             :teleport="true"
             v-model="work.workPermitExpireDate"
-            :locale="'th'"
+            :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
             :enableTimePicker="false"
             :disabled="readonly"
             class="col-6"
           >
             <template #year="{ value }">
-              {{ value + 543 }}
+              {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ $i18n.locale === 'th-th' ? value + 543 : value }}
             </template>
             <template #trigger>
               <q-input