diff --git a/src/components/03_customer-management/FormEmployeeHealthCheck.vue b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
index a1a795ad..08c2f222 100644
--- a/src/components/03_customer-management/FormEmployeeHealthCheck.vue
+++ b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
@@ -10,6 +10,7 @@ import { EmployeeCheckupCreate } from 'stores/employee/types';
 import { useI18n } from 'vue-i18n';
 import { checkTabBeforeAdd, selectFilterOptionRefMod } from 'stores/utils';
 import { QSelect } from 'quasar';
+import DatePicker from '../shared/DatePicker.vue';
 import {
   AddButton,
   EditButton,
@@ -154,7 +155,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         size="xs"
         class="q-pa-sm rounded q-mr-sm"
         color="info"
-        name="mdi-hospital-box"
+        name="mdi-hospital-box-outline"
         style="background-color: var(--surface-3)"
       />
       {{ $t(`formDialogTitleHealthCheck`) }}
@@ -347,131 +348,22 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         type="textarea"
         :for="`${prefixId}-input-remark`"
       />
-      <VueDatePicker
-        utc
-        autoApply
+      <DatePicker
+        :label="$t('formDialogInputCoverageStartDate')"
         v-model="checkup.coverageStartDate"
-        :teleport="true"
-        :dark="$q.dark.isActive"
-        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-        :enableTimePicker="false"
-        :disabled="readonly || checkup.statusSave"
         class="col"
-      >
-        <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"
-            :id="`${prefixId}-input-birth-date`"
-            :for="`${prefixId}-input-birth-date`"
-            :label="$t('formDialogInputCoverageStartDate')"
-            :dense="dense"
-            outlined
-            :readonly="readonly || checkup.statusSave"
-            placeholder="DD/MM/YYYY"
-            :mask="readonly || checkup.statusSave ? '' : '##/##/####'"
-            :model-value="
-              checkup.coverageStartDate
-                ? readonly || checkup.statusSave
-                  ? dateFormat(checkup.coverageStartDate)
-                  : dateFormat(checkup.coverageStartDate, false, false, true)
-                : undefined
-            "
-            @update:model-value="
-              (v) => {
-                if (v && v.toString().length === 10) {
-                  checkup.coverageStartDate = 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="checkup.coverageStartDate && !readonly"
-                name="mdi-close-circle"
-                class="cursor-pointer app-text-muted"
-                size="sm"
-                @click.stop="checkup.coverageStartDate = undefined"
-              />
-            </template>
-          </q-input>
-        </template>
-      </VueDatePicker>
-      <VueDatePicker
-        utc
-        autoApply
+        :id="`${prefixId}-input-coverage-start-date`"
+        :readonly="readonly || checkup.statusSave"
+        clearable
+      />
+      <DatePicker
+        :label="$t('formDialogInputCoverageExpiretDate')"
         v-model="checkup.coverageExpireDate"
-        :teleport="true"
-        :dark="$q.dark.isActive"
-        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-        :enableTimePicker="false"
-        :disabled="readonly"
         class="col"
-      >
-        <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"
-            id="input-birth-date"
-            :label="$t('formDialogInputCoverageExpiretDate')"
-            :dense="dense"
-            outlined
-            :readonly="readonly || checkup.statusSave"
-            placeholder="DD/MM/YYYY"
-            :mask="readonly || checkup.statusSave ? '' : '##/##/####'"
-            :model-value="
-              checkup.coverageExpireDate
-                ? readonly || checkup.statusSave
-                  ? dateFormat(checkup.coverageExpireDate)
-                  : dateFormat(checkup.coverageExpireDate, false, false, true)
-                : undefined
-            "
-            @update:model-value="
-              (v) => {
-                if (v && v.toString().length === 10) {
-                  checkup.coverageExpireDate = 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="checkup.coverageExpireDate && !readonly"
-                name="mdi-close-circle"
-                class="cursor-pointer app-text-muted"
-                size="sm"
-                @click.stop="checkup.coverageExpireDate = undefined"
-              />
-            </template>
-          </q-input>
-        </template>
-      </VueDatePicker>
+        :id="`${prefixId}-input-coverage-expire-date`"
+        :readonly="readonly || checkup.statusSave"
+        clearable
+      />
 
       <q-select
         outlined
diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index 22fe8747..9bb98187 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -7,6 +7,7 @@ import { useI18n } from 'vue-i18n';
 import useOptionStore from 'stores/options';
 import { watch } from 'vue';
 import { onMounted } from 'vue';
+import DatePicker from '../shared/DatePicker.vue';
 
 const optionStore = useOptionStore();
 const { locale } = useI18n();
@@ -213,122 +214,29 @@ watch(
           </q-item>
         </template>
       </q-select>
-      <VueDatePicker
+      <DatePicker
         :id="`${prefixId}-date-picker-passport-issueance`"
-        utc
-        autoApply
+        :label="$t('formDialogInputPassportIssuance')"
         v-model="passportIssueDate"
-        :teleport="true"
-        :dark="$q.dark.isActive"
-        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-        :enableTimePicker="false"
-        :disabled="readonly"
         class="col-md-3 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"
-            :id="`${prefixId}-input-birth-date`"
-            hide-bottom-space
-            :label="$t('formDialogInputPassportIssuance')"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            :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
-                size="xs"
-                name="mdi-calendar-blank-outline"
-                class="cursor-pointer"
-                color="primary"
-              />
-            </template>
-          </q-input>
-        </template>
-      </VueDatePicker>
-      <VueDatePicker
+        :readonly="readonly"
+        :rules="[
+          (val: string) =>
+            !!val ||
+            $t('selectValidate') + $t('formDialogInputPassportIssuance'),
+        ]"
+      />
+      <DatePicker
         :id="`${prefixId}-date-picker-passport-expire`"
-        utc
-        autoApply
+        :label="$t('formDialogInputPassportExpire')"
         v-model="passportExpiryDate"
-        :teleport="true"
-        :dark="$q.dark.isActive"
-        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-        :enableTimePicker="false"
-        :disabled="readonly"
         class="col-md-3 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"
-            :id="`${prefixId}-input-birth-date`"
-            hide-bottom-space
-            :label="$t('formDialogInputPassportExpire')"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            :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
-                size="xs"
-                name="mdi-calendar-blank-outline"
-                class="cursor-pointer"
-                color="primary"
-              />
-            </template>
-          </q-input>
-        </template>
-      </VueDatePicker>
+        :readonly="readonly"
+        :rules="[
+          (val: string) =>
+            !!val || $t('selectValidate') + $t('formDialogInputPassportExpire'),
+        ]"
+      />
     </div>
   </div>
 </template>
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index da375238..eec8a70d 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -11,6 +11,7 @@ import { useI18n } from 'vue-i18n';
 import { selectFilterOptionRefMod } from 'stores/utils';
 import useOptionStore from 'stores/options';
 import { watch } from 'vue';
+import DatePicker from '../shared/DatePicker.vue';
 
 const optionStore = useOptionStore();
 const { locale } = useI18n();
@@ -154,146 +155,22 @@ watch(
         (val: string) =>
           !!val || $t('inputValidate') + $t('formDialogInputVisaNo'),
       ]" -->
-      <VueDatePicker
+      <DatePicker
+        class="col-2"
         :id="`${prefixId}-date-picker-visa-issuance`"
-        utc
-        autoApply
+        :readonly="readonly"
+        :label="$t('formDialogInputVisaIssuance')"
         v-model="visaIssueDate"
-        :teleport="true"
-        :dark="$q.dark.isActive"
-        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-        :enableTimePicker="false"
-        :disabled="readonly"
+        clearable
+      />
+      <DatePicker
         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"
-            :id="`${prefixId}-input-birth-date`"
-            hide-bottom-space
-            :label="$t('formDialogInputVisaIssuance')"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            placeholder="DD/MM/YYYY"
-            :mask="readonly ? '' : '##/##/####'"
-            :model-value="
-              visaIssueDate
-                ? readonly
-                  ? dateFormat(visaIssueDate)
-                  : dateFormat(visaIssueDate, false, false, true)
-                : readonly
-                  ? '-'
-                  : undefined
-            "
-            @update:model-value="
-              (v) => {
-                if (v && v.toString().length === 10) {
-                  visaIssueDate = parseAndFormatDate(v, locale);
-                }
-              }
-            "
-          >
-            <!-- :rules="[
-            (val: string) =>
-              !!val || $t('selectValidate') + $t('formDialogInputVisaIssuance'),
-          ]" -->
-            <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="visaIssueDate && !readonly"
-                name="mdi-close-circle"
-                class="cursor-pointer app-text-muted"
-                size="sm"
-                @click="visaIssueDate = undefined"
-              />
-            </template>
-          </q-input>
-        </template>
-      </VueDatePicker>
-      <VueDatePicker
         :id="`${prefixId}-date-picker-visa-expire`"
-        utc
-        autoApply
+        :readonly="readonly"
+        :label="$t('formDialogInputVisaExpire')"
         v-model="visaExpiryDate"
-        :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"
-            :id="`${prefixId}-input-birth-date`"
-            hide-bottom-space
-            :label="$t('formDialogInputVisaExpire')"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            placeholder="DD/MM/YYYY"
-            :mask="readonly ? '' : '##/##/####'"
-            :model-value="
-              visaExpiryDate
-                ? readonly
-                  ? dateFormat(visaExpiryDate)
-                  : dateFormat(visaExpiryDate, false, false, true)
-                : readonly
-                  ? '-'
-                  : undefined
-            "
-            @update:model-value="
-              (v) => {
-                if (v && v.toString().length === 10) {
-                  visaExpiryDate = parseAndFormatDate(v, locale);
-                }
-              }
-            "
-          >
-            <!-- :rules="[
-            (val: string) =>
-              !!val || $t('selectValidate') + $t('formDialogInputVisaExpire'),
-          ]" -->
-            <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="visaExpiryDate && !readonly"
-                name="mdi-close-circle"
-                class="cursor-pointer app-text-muted"
-                size="sm"
-                @click="visaExpiryDate = undefined"
-              />
-            </template>
-          </q-input>
-        </template>
-      </VueDatePicker>
+        clearable
+      />
 
       <q-input
         lazy-rules="ondemand"
@@ -313,77 +190,14 @@ watch(
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogInputVisaPlace'),
       ]" -->
-      <VueDatePicker
-        :id="`${prefixId}-date-picker-visa-until`"
-        utc
-        autoApply
-        v-model="visaStayUntilDate"
-        :teleport="true"
-        :dark="$q.dark.isActive"
-        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-        :enableTimePicker="false"
-        :disabled="readonly"
+      <DatePicker
         class="col-4"
-      >
-        <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"
-            :id="`${prefixId}-input-birth-date`"
-            hide-bottom-space
-            :label="$t('formDialogInputVisaStayUntil')"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            placeholder="DD/MM/YYYY"
-            :mask="readonly ? '' : '##/##/####'"
-            :model-value="
-              visaStayUntilDate
-                ? readonly
-                  ? dateFormat(visaStayUntilDate)
-                  : dateFormat(visaStayUntilDate, false, false, true)
-                : readonly
-                  ? '-'
-                  : undefined
-            "
-            @update:model-value="
-              (v) => {
-                if (v && v.toString().length === 10) {
-                  visaStayUntilDate = parseAndFormatDate(v, locale);
-                }
-              }
-            "
-          >
-            <!-- :rules="[
-            (val: string) =>
-              !!val ||
-              $t('selectValidate') + $t('formDialogInputVisaStayUntil'),
-          ]" -->
-            <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="visaStayUntilDate && !readonly"
-                name="mdi-close-circle"
-                class="cursor-pointer app-text-muted"
-                size="sm"
-                @click="visaStayUntilDate = undefined"
-              />
-            </template>
-          </q-input>
-        </template>
-      </VueDatePicker>
+        :id="`${prefixId}-date-picker-visa-until`"
+        :readonly="readonly"
+        :label="$t('formDialogInputVisaStayUntil')"
+        v-model="visaStayUntilDate"
+        clearable
+      />
 
       <q-input
         lazy-rules="ondemand"
@@ -404,75 +218,14 @@ watch(
         (val: string) =>
           !!val || $t('inputValidate') + $t('formDialogInputVisaTM6'),
       ]" -->
-      <VueDatePicker
-        :id="`${prefixId}-date-picker-visa-enter`"
-        utc
-        autoApply
-        v-model="entryDate"
-        :teleport="true"
-        :dark="$q.dark.isActive"
-        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-        :enableTimePicker="false"
-        :disabled="readonly"
+      <DatePicker
         class="col-4"
-      >
-        <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"
-            :id="`${prefixId}-input-birth-date`"
-            :label="$t('formDialogInputVisaEnter')"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            placeholder="DD/MM/YYYY"
-            :mask="readonly ? '' : '##/##/####'"
-            :model-value="
-              entryDate
-                ? readonly
-                  ? dateFormat(entryDate)
-                  : dateFormat(entryDate, false, false, true)
-                : readonly
-                  ? '-'
-                  : undefined
-            "
-            @update:model-value="
-              (v) => {
-                if (v && v.toString().length === 10) {
-                  entryDate = parseAndFormatDate(v, locale);
-                }
-              }
-            "
-          >
-            <!-- :rules="[
-            (val: string) =>
-              !!val || $t('selectValidate') + $t('formDialogInputVisaEnter'),
-          ]" -->
-            <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="entryDate && !readonly"
-                name="mdi-close-circle"
-                class="cursor-pointer app-text-muted"
-                size="sm"
-                @click.stop="entryDate = undefined"
-              />
-            </template>
-          </q-input>
-        </template>
-      </VueDatePicker>
+        :id="`${prefixId}-date-picker-visa-enter`"
+        :readonly="readonly"
+        :label="$t('formDialogInputVisaEnter')"
+        v-model="entryDate"
+        clearable
+      />
     </div>
   </div>
 </template>
diff --git a/src/components/03_customer-management/FormEmployeeWorkHistory.vue b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
index fa380643..c16906f9 100644
--- a/src/components/03_customer-management/FormEmployeeWorkHistory.vue
+++ b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
@@ -4,6 +4,8 @@ import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
 import { EmployeeWorkCreate } from 'stores/employee/types';
 import { useI18n } from 'vue-i18n';
 import { checkTabBeforeAdd, selectFilterOptionRefMod } from 'stores/utils';
+import DatePicker from '../shared/DatePicker.vue';
+
 import {
   AddButton,
   EditButton,
@@ -109,7 +111,7 @@ const workplaceFilter = selectFilterOptionRefMod(
         size="xs"
         class="q-pa-sm rounded q-mr-xs"
         color="info"
-        name="mdi-briefcase"
+        name="mdi-briefcase-outline"
         style="background-color: var(--surface-3)"
       />
       {{ $t(`workHistory`) }}
@@ -248,69 +250,15 @@ const workplaceFilter = selectFilterOptionRefMod(
         v-model="work.remark"
         type="textarea"
       />
-      <VueDatePicker
-        :id="`${prefixId}-date-picker-work-end-date`"
-        utc
-        autoApply
+      <DatePicker
+        :label="$t('formDialogInputWorkUntil')"
         v-model="work.workEndDate"
-        :teleport="true"
-        :dark="$q.dark.isActive"
-        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-        :enableTimePicker="false"
-        :disabled="readonly || work.statusSave"
         class="col-3"
-      >
-        <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"
-            :id="`${prefixId}-input-birth-date`"
-            :label="$t('formDialogInputWorkUntil')"
-            :dense="dense"
-            outlined
-            :readonly="readonly || work.statusSave"
-            placeholder="DD/MM/YYYY"
-            :mask="readonly ? '' : '##/##/####'"
-            :model-value="
-              work.workEndDate
-                ? readonly || work.statusSave
-                  ? dateFormat(work.workEndDate)
-                  : dateFormat(work.workEndDate, false, false, true)
-                : undefined
-            "
-            @update:model-value="
-              (v) => {
-                if (v && v.toString().length === 10) {
-                  work.workEndDate = 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="work.workEndDate && !readonly"
-                name="mdi-close-circle"
-                class="cursor-pointer app-text-muted"
-                size="sm"
-                @click.stop="work.workEndDate = undefined"
-              />
-            </template>
-          </q-input>
-        </template>
-      </VueDatePicker>
+        :id="`${prefixId}-input-work-until-date`"
+        :readonly="readonly || work.statusSave"
+        clearable
+      />
+
       <q-input
         lazy-rules="ondemand"
         :for="`${prefixId}-input-work-permit-no`"
@@ -322,132 +270,23 @@ const workplaceFilter = selectFilterOptionRefMod(
         :label="$t('formDialogInputWorkPermitNo')"
         v-model="work.workPermitNo"
       />
-      <VueDatePicker
-        :id="`${prefixId}-date-picker-work-permit-issu-date`"
-        utc
-        autoApply
+      <DatePicker
+        :label="$t('formDialogInputWorkPermitIssueDate')"
         v-model="work.workPermitIssuDate"
-        :teleport="true"
-        :dark="$q.dark.isActive"
-        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-        :enableTimePicker="false"
-        :disabled="readonly || work.statusSave"
         class="col-3"
-      >
-        <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"
-            :id="`${prefixId}-input-birth-date`"
-            :label="$t('formDialogInputWorkPermitIssueDate')"
-            :dense="dense"
-            outlined
-            :readonly="readonly || work.statusSave"
-            placeholder="DD/MM/YYYY"
-            :mask="readonly || work.statusSave ? '' : '##/##/####'"
-            :model-value="
-              work.workPermitIssuDate
-                ? readonly || work.statusSave
-                  ? dateFormat(work.workPermitIssuDate)
-                  : dateFormat(work.workPermitIssuDate, false, false, true)
-                : undefined
-            "
-            @update:model-value="
-              (v) => {
-                if (v && v.toString().length === 10) {
-                  work.workPermitIssuDate = 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="work.workPermitIssuDate && !readonly"
-                name="mdi-close-circle"
-                class="cursor-pointer app-text-muted"
-                size="sm"
-                @click.stop="work.workPermitIssuDate = undefined"
-              />
-            </template>
-          </q-input>
-        </template>
-      </VueDatePicker>
-      <VueDatePicker
-        :id="`${prefixId}-date-picker-work-permit-expire-date`"
-        utc
-        autoApply
+        :id="`${prefixId}-date-picker-work-permit-issue-date`"
+        :readonly="readonly || work.statusSave"
+        clearable
+      />
+      <DatePicker
+        :label="$t('formDialogInputWorkPermitExpireDate')"
         v-model="work.workPermitExpireDate"
-        :teleport="true"
-        :dark="$q.dark.isActive"
-        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-        :enableTimePicker="false"
-        :disabled="readonly || work.statusSave"
         class="col-3"
-      >
-        <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"
-            :id="`${prefixId}-input-birth-date`"
-            :label="$t('formDialogInputWorkPermitExpireDate')"
-            :dense="dense"
-            outlined
-            :readonly="readonly || work.statusSave"
-            placeholder="DD/MM/YYYY"
-            :mask="readonly || work.statusSave ? '' : '##/##/####'"
-            :model-value="
-              work.workPermitExpireDate
-                ? readonly || work.statusSave
-                  ? dateFormat(work.workPermitExpireDate)
-                  : dateFormat(work.workPermitExpireDate, false, false, true)
-                : undefined
-            "
-            @update:model-value="
-              (v) => {
-                if (v && v.toString().length === 10) {
-                  work.workPermitExpireDate = 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="work.workPermitExpireDate && !readonly"
-                name="mdi-close-circle"
-                class="cursor-pointer app-text-muted"
-                size="sm"
-                @click.stop="work.workPermitExpireDate = undefined"
-              />
-            </template>
-          </q-input>
-        </template>
-      </VueDatePicker>
+        :id="`${prefixId}-date-picker-work-permit-expire-date`"
+        :readonly="readonly || work.statusSave"
+        clearable
+      />
+
       <q-input
         lazy-rules="ondemand"
         :for="`${prefixId}-input-owner-name`"
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue b/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
index 2c31027f..dfb4cc9c 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
@@ -4,6 +4,8 @@ import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
 import { onMounted, watch } from 'vue';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import DatePicker from 'src/components/shared/DatePicker.vue';
+
 const { locale } = useI18n({ useScope: 'global' });
 
 const employmentOffice = defineModel<string>('employmentOffice');
@@ -192,70 +194,13 @@ let jobPositionFilter = selectFilterOptionRefMod(
       v-model="jobDescription"
     />
 
-    <VueDatePicker
-      :id="`${prefixId}-date-picker-start-date`"
-      :teleport="true"
-      utc
-      autoApply
+    <DatePicker
+      :id="`${prefixId}-date-picker-pay-date`"
       v-model="payDate"
-      :dark="$q.dark.isActive"
-      :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-      :enableTimePicker="false"
-      :disabled="readonly"
-      class="col-md-3 col-12"
-    >
-      <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-start-date`"
-          :id="`${prefixId}-input-start-date`"
-          :label="$t('payDay')"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          placeholder="DD/MM/YYYY"
-          :mask="readonly ? '' : '##/##/####'"
-          :model-value="
-            payDate
-              ? readonly
-                ? dateFormat(payDate)
-                : dateFormat(payDate, false, false, true)
-              : undefined
-          "
-          @update:model-value="
-            (v) => {
-              if (v && v.toString().length === 10) {
-                payDate = 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="payDate && !readonly"
-              name="mdi-close-circle"
-              class="cursor-pointer app-text-muted"
-              size="sm"
-              @click="payDate = undefined"
-            />
-          </template>
-        </q-input>
-      </template>
-    </VueDatePicker>
+      :label="$t('payDay')"
+      :readonly="readonly"
+      clearable
+    />
 
     <q-input
       lazy-rules="ondemand"