diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index cfca51c6..d4211096 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -8,6 +8,7 @@ import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Icon } from '@iconify/vue';
 import { QSelect } from 'quasar';
+import DatePicker from '../shared/DatePicker.vue';
 
 const { locale } = useI18n();
 const userStore = useUserStore();
@@ -158,132 +159,24 @@ watch(
           "
           @clear="registrationNo = ''"
         />
-        <VueDatePicker
-          id="input-startDate"
-          utc
-          autoApply
-          :dark="$q.dark.isActive"
+        <DatePicker
+          class="col-6"
+          id="input-start-date"
+          :readonly="readonly"
+          :label="$t('formDialogInputStartDate')"
           v-model="startDate"
-          :teleport="true"
-          :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-          :enableTimePicker="false"
-          :disabled="readonly"
-          class="col-6"
-        >
-          <template #year="{ value }">
-            {{ $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
-              lazy-rules="ondemand"
-              for="input-start-date"
-              :label="$t('formDialogInputStartDate')"
-              :dense="dense"
-              outlined
-              :readonly="readonly"
-              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
-                  size="xs"
-                  name="mdi-calendar-blank-outline"
-                  class="cursor-pointer"
-                  color="primary"
-                />
-              </template>
-              <template v-slot:append>
-                <q-icon
-                  v-if="startDate && !readonly"
-                  name="mdi-close-circle"
-                  class="cursor-pointer app-text-muted"
-                  size="sm"
-                  @click.stop="startDate = undefined"
-                />
-              </template>
-            </q-input>
-          </template>
-        </VueDatePicker>
+          clearable
+        />
 
-        <VueDatePicker
-          utc
-          autoApply
-          v-model="retireDate"
-          :dark="$q.dark.isActive"
-          :teleport="true"
-          :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-          :enableTimePicker="false"
-          :disabled="readonly"
+        <DatePicker
           class="col-6"
-        >
-          <template #year="{ value }">
-            {{ $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
-              lazy-rules="ondemand"
-              for="input-retire-date"
-              :label="$t('formDialogInputRetireDate')"
-              :dense="dense"
-              outlined
-              :readonly="readonly"
-              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
-                  size="xs"
-                  name="mdi-calendar-blank-outline"
-                  class="cursor-pointer"
-                  color="primary"
-                />
-              </template>
-              <template v-slot:append>
-                <q-icon
-                  v-if="retireDate && !readonly"
-                  name="mdi-close-circle"
-                  class="cursor-pointer app-text-muted"
-                  size="sm"
-                  @click.stop="retireDate = undefined"
-                />
-              </template>
-            </q-input>
-          </template>
-        </VueDatePicker>
+          id="input-retire-date"
+          :readonly="readonly"
+          :label="$t('formDialogInputRetireDate')"
+          v-model="retireDate"
+          clearable
+        />
+
         <q-select
           v-if="userType === 'MESSENGER'"
           outlined
diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index 8fa73a46..537c1eb2 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -11,6 +11,7 @@ import {
 import { ref, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { capitalize } from 'vue';
+import DatePicker from '../shared/DatePicker.vue';
 
 const { locale } = useI18n();
 const optionStore = useOptionStore();
@@ -325,68 +326,19 @@ watch(
         </template>
       </q-select>
 
-      <VueDatePicker
-        :id="`${prefixId}-input-birth-date`"
-        :for="`${prefixId}-input-birth-date`"
-        utc
-        autoApply
+      <DatePicker
         v-model="birthDate"
-        :disabled-dates="disabledAfterToday"
-        :teleport="true"
-        :dark="$q.dark.isActive"
-        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-        :enableTimePicker="false"
-        :disabled="readonly"
         class="col-2"
-      >
-        <template #year="{ value }">
-          {{ $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
-            lazy-rules="ondemand"
-            :for="`${prefixId}-input-birth-date`"
-            hide-bottom-space
-            placeholder="DD/MM/YYYY"
-            :label="$t('formDialogInputBirthDate')"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            :rules="[
-              (val: string) =>
-                !!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
-            ]"
-            :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, locale);
-                  birthDate = date && date > today ? today : date;
-                  console.log(today);
-                }
-              }
-            "
-          >
-            <template v-slot:prepend>
-              <q-icon
-                size="xs"
-                name="mdi-calendar-blank-outline"
-                class="cursor-pointer"
-                color="primary"
-              />
-            </template>
-          </q-input>
-        </template>
-      </VueDatePicker>
+        :id="`${prefixId}-input-birth-date`"
+        :readonly="readonly"
+        :label="$t('formDialogInputBirthDate')"
+        :disabled-dates="disabledAfterToday"
+        :rules="[
+          (val: string) =>
+            !!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
+        ]"
+      />
+
       <q-input
         lazy-rules="ondemand"
         :for="`${prefixId}-input-age`"